我對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）

回答

編輯

相關問題