我对HTML没有任何了解。所以我必须为飞行中的项目制作这个。我需要这个论坛的专家的帮助。我需要在一页上放置三张折线图和一张谷歌测量图，我该如何编写一个HTML代码，将屏幕分成4个部分放置每个图表。这里是线图的一个HTML代码：如何将四个屏幕分割为四个并在每个分区中放置谷歌图表（HTML）

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

     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000,  400], 
      ['2005', 1170,  460], 
      ['2006', 660,  1120], 
      ['2007', 1030,  540] 
     ]); 

     var options = { 
      title: 'Company Performance', 
      curveType: 'function', 
      legend: { position: 'bottom' } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="curve_chart" style="width: 900px; height: 500px"></div> 
    </body> 
</html>

这里是计图表HTML代码：

<html> 
    <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'], 
      ['Memory', 80], 
      ['CPU', 55] 

     ]); 

     var options = { 
      width: 400, height: 120, 
      redFrom: 90, redTo: 100, 
      yellowFrom:75, yellowTo: 90, 
      minorTicks: 5 
     }; 

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

     chart.draw(data, options); 


    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 400px; height: 120px;"></div> 
    </body> 
</html>

来源

2016-02-08 Julia_arch

你可以使用jQuery。 https://jsfiddle.net/bbbprgp3/ –

基本上，这里是分割屏幕分为四个部分

.wrapper > div { 
    position:absolute; 
    width:50vw; 
    height:50vh; 
    overflow:hidden; 
} 

#chart1 {top:0;left:0;} 
#chart2 {top:0;right:0;} 
#chart3 {bottom:0;left:0;} 
#chart4 {bottom:0;right:0;} 

<div class="wrapper"> 
    <div id="chart1"></div> 
    <div id="chart2"></div> 
    <div id="chart3"></div> 
    <div id="chart4"></div> 
</div>

结构

当然，你将不得不刷新图表一旦屏幕尺寸变化

这里在线演示：https://jsfiddle.net/0cr5enak/

编辑

好吧，垂直堆叠我只想去为每个格高度属性设置为1/4屏幕尺寸：https://jsfiddle.net/0cr5enak/2/

来源

2016-02-08 19:52:43

太好了，谢谢。我会在几个小时后回家时尝试它。我会及时通知你的。 –

非常感谢！我只是试了一下，你的解决方案完美的工作，它节省了我很多时间，因为我没有任何关于HTML的经验。干杯! –

如果我想让它们垂直堆叠，我只是意识到当我向他们添加数据时，我的图形会变得更宽。如果我可以用顶部的Gauge图形垂直堆叠它们会更好。 –

如何将四个屏幕分割为四个并在每个分区中放置谷歌图表（HTML）

回答

编辑

相关问题