在 HTML 上绘制默认高度

Question

这是我的第一个问题。

我正在 web2py 环境中工作，我需要在 HTML 文件中绘制一组图表。围绕这个问题的挑战是仪表图。当显示购物车时，它会忽略我输入的高度参数。我在Google上搜索，发现高度是Plotly libraty默认的，我无法直接操作它。我该怎么做才能适合那个 3x3 div？代码如下：

<!DOCTYPE html>



<html>
<head>
    <meta charset="UTF-8">
    <title>Gráficos</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        body {
            * {
                box-sizing: border-box;
            }

            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: white;
        }
        
        .main-container {
            width: 100%;
            height: 100vh;
            display: flex;
            background-color: red;
            flex-wrap: wrap;
        }
        
        .sub-container {
            display: flex;
            flex-wrap: wrap;
            width: 50%;
            height: 50vh;
            font-weight: bold;
            justify-content: center;
            align-items: center;
        }
        
        .component1 {
            background-color: green;
        }
        
        .component2 {
            background-color: blue;
        }
        
        .component3 {
            background-color: yellow;
        }
        
        .component4 {
            background-color: pink;
        }
        
        .pizza_component, .trade_component, .media_component {
            width: 25%;
            height: 25%;
        }
        
        .pizza_component {
            background-color: purple;
        }
        
        .trade_component {
            background-color: lightgreen;
        }
        
        .media_component {
            background-color: orange;
        }
        
        .gauge_component {
            background-color: silver;
        }
        
        
        .trades_and_volumes {
            width: 25%;
            height: 25vh;
        }
        
        .wallets {
            width: 25%;
            height: 25vh;
        }
        
        .gauges {
            width: 33%;
            height: 100%;
            border: 1px #000 solid;
        }
        
        
        .gauges.gauge_component {
            max-height: 33%;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="sub-container component1">
            <!-- 1 - PIZZA GRAPHS -->
            <div class="pizza_component">
                PIZZA 1
            </div>
            <div class="pizza_component">
                PIZZA 2
            </div>
        </div>
        <div class="sub-container component2">
            <!-- 2 - TRADES GRAPHS -->
            <div class="trade_component">
                TRADE 1
            </div>
            <div class="trade_component">
                TRADE 2
            </div>
        </div>
        <div class="sub-container component3">
            <!-- 3 - MEDIA GRAPHS -->
            <div class="media_component">
                MEAN 1
            </div>
            <div class="media_component">
                MEAN 2
            </div>
        </div>
        
        <div class="sub-container component4">
            <div class="gauges gauge_component">
                {{=XML(graph_trade)}}
                <!-- GAUGE 1 -->
                <!-- {{=XML(graph_trade)}} -->
            </div>
            <div class="gauges gauge_component">
                {{=XML(graph_trade1)}}
                <!-- GAUGE 2 -->
                <!-- {{=XML(graph_trade1)}} -->
            </div>
            <div class="gauges gauge_component">
                {{=XML(wallet3)}}
                <!-- GAUGE 3 -->
                <!-- {{=XML(wallet3)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 4
                <!-- GAUGE 4 -->
                <!-- {{=XML(wallet4)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 5
                <!-- GAUGE 5 -->
                <!-- {{=XML(wallet5)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 6
                <!-- GAUGE 6 -->
                <!-- {{=XML(wallet6)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 7
                <!-- GAUGE 7 -->
                <!-- {{=XML(wallet7)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 8
                <!-- GAUGE 8 -->
                <!-- {{=XML(wallet8)}} -->
            </div>
            <div class="gauges gauge_component">
                GAUGE 9
                <!-- GAUGE 9 -->
                <!-- {{=XML(wallet9)}} -->
            </div>
        </div>
    <script>
        setTimeout(function() {
          location.reload();
        }, 100000);
    </script>

</body>
</html>

Answer 1

@卢安桑托斯贡萨尔维斯

抱歉没有答案，但我希望将交互式绘图图表添加到我的 web2py 项目中。如果您有相同的示例..一个简单的折线图..那将是您的好意。

在 HTML 上绘制默认高度

问题描述投票：0回答：1

1个回答

最新问题

在 HTML 上绘制默认高度

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1