Javascript 在html页面上定位图表_Javascript_Html_Css

Javascript 在html页面上定位图表

javascript html css

Javascript 在html页面上定位图表,javascript,html,css,Javascript,Html,Css,我正在构建一个基本的仪表板，并使用谷歌图表来实现。我已成功地将我的仪表图表嵌入网页。我现在正试图定位它们我已经读到，这需要使用css定位来完成我的问题是，如果这是解决方案，我如何在代码中使用它我正在尝试拆分，所以我将在顶部有3个仪表，底部有2个仪表我已经尝试过使用只需使用position:absolute使用CSS设置图表div的样式然后使用顶部和左侧属性对其进行定位。例如：定位： #图表分区{ 位置：绝对位置；最高：50%；左：10%； } google.charts.lo

我正在构建一个基本的仪表板，并使用谷歌图表来实现。我已成功地将我的仪表图表嵌入网页。我现在正试图定位它们

我已经读到，这需要使用

css定位来完成
我的问题是，如果这是解决方案，我如何在代码中使用它
我正在尝试拆分，所以我将在顶部有3个仪表，底部有2个仪表
我已经尝试过使用只需使用position:absolute使用CSS设置图表div的样式然后使用顶部
和左侧
属性对其进行定位。例如：
定位：

#图表分区{
位置：绝对位置；
最高：50%；
左：10%；
}

google.charts.load（'current'{
“包装”：[“规格”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Daily GP'，80]，
['MTD GP'，55]，
[开放式RO'，68]，
['NPS'，68]，
[‘充电效率’，68]
]);
变量选项={
宽度：800，
身高：200，
格林斯潘：90，
雷德托：60，
发黄时间:60,，
yellowTo:90，
米诺蒂克斯：5
};
var chart=new google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
setInterval（函数（）{
setValue（0,1,40+Math.round（60*Math.random（））；
图表绘制（数据、选项）；
}, 13000);
setInterval（函数（）{
data.setValue（1,1,40+Math.round（60*Math.random（））；
图表绘制（数据、选项）；
}, 5000);
setInterval（函数（）{
data.setValue（2,1,60+Math.round（20*Math.random（））；
图表绘制（数据、选项）；
}, 26000);
setInterval（函数（）{
data.setValue（3,1,60+Math.round（20*Math.random（））；
图表绘制（数据、选项）；
}, 26000);
setInterval（函数（）{
data.setValue（4,1,60+Math.round（20*Math.random（））；
图表绘制（数据、选项）；
}, 26000);
}
如果您希望顶部有三个量规，底部有三个量规，我会这样做，将它们分别放在各自的div中，并将它们包装在flexbox容器中！我已将数据分离到两个不同的div中，每个div都有自己的id（顶行
&&底行
）。然后我分配Document.getElementById（）来查找这两个变量，并写入我想要的量表。
Flexbox基本上允许我们将内容包装在容器中


load（'current'，{'packages'：['gauge']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var topData=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Daily GP'，80]，
['MTD GP'，55]，
[开放式RO'，68]，
['NPS'，68]，
[‘充电效率’，68]
]);
var bottomData=google.visualization.arrayToDataTable([
['Label'，'Value']，
[一些爵士乐，80]，
[开放式RO'，68]，
]);
变量选项={
宽度：800，高度：200，
绿色从：90，红色到：60，
黄色从：60，黄色到：90，
米诺蒂克斯：5
};
var topCharts=new google.visualization.Gauge（document.getElementById（'top-row'）；
var bottomCharts=new google.visualization.Gauge（document.getElementById（'bottom-row'））
topCharts.draw（topData，选项）；
底部图表。绘制（底部数据，选项）
}

<html>
    <body style="background-color:dodgerblue;"></body>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Daily GP', 80],
          ['MTD GP', 55],
          ['Open RO', 68],
          ['NPS', 68],
          ['Charging Eff', 68]
        ]);
        
        var options = {
          width: 800, height: 200,
          greenFrom: 90, redTo: 60,
          yellowFrom:60, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);
        
        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
        setInterval(function() {
          data.setValue(3, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
        setInterval(function() {
          data.setValue(4, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
        
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 800px; height: 200px;"></div>
  </body>
</html>