stackoom
  简体   繁体   中英

Google Chart problems (chart title, axis text)

 原文  2016-02-09 08:08:17  0   1    javascript/ html/ charts/ google-visualization

Question

I have a couple of problems with google charts, please take a look at the screenshot and code below.

  1. The first line chart title doesn't display

  2. The legend was automatically displayed to the right( first line chart), even though I specified the legend to display on the bottom of the chart

  3. The horizontal axis data appear on the first line chat only, how do I display the data in all three charts?

  4. How do I change the horizontal axis data so it can display at a 90-degree angle so it can be readable? 

 <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', 'gauge'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Time', 'Temperature'], ['2016-02-08 08:46:04', 79], ['2016-02-08 08:47:02', 79], ['2016-02-08 09:00:02', 77], ['2016-02-08 09:15:01', 76], ['2016-02-08 09:30:01', 78], ['2016-02-08 09:45:02', 78], ['2016-02-08 10:00:01', 77], ['2016-02-08 10:15:01', 77], ['2016-02-08 10:29:23', 78], ['2016-02-08 10:30:02', 78], ['2016-02-08 10:45:02', 77], ['2016-02-08 11:00:01', 77], ['2016-02-08 11:15:02', 78], ['2016-02-08 11:30:01', 78], ['2016-02-08 11:45:02', 77], ['2016-02-08 12:00:02', 77], ['2016-02-08 12:15:02', 78], ['2016-02-08 12:30:02', 77], ['2016-02-08 12:45:02', 76], ['2016-02-08 13:00:01', 75], ['2016-02-08 13:15:01', 74], ['2016-02-08 13:30:02', 76], ['2016-02-08 13:45:02', 76], ['2016-02-08 14:00:02', 75], ['2016-02-08 14:15:02', 75], ['2016-02-08 14:30:01', 77], ['2016-02-08 14:45:01', 77], ['2016-02-08 15:00:01', 76], ['2016-02-08 15:15:02', 77], ['2016-02-08 15:30:02', 77], ['2016-02-08 15:45:02', 77], ['2016-02-08 16:00:02', 77], ['2016-02-08 16:15:02', 77], ['2016-02-08 16:30:01', 78], ['2016-02-08 16:45:01', 78], ['2016-02-08 17:00:02', 78], ['2016-02-08 17:15:01', 79], ['2016-02-08 17:30:02', 78], ['2016-02-08 17:45:02', 77], ['2016-02-08 18:00:02', 77], ['2016-02-08 18:15:01', 77], ['2016-02-08 18:30:02', 77], ['2016-02-08 18:45:01', 77], ['2016-02-08 19:00:02', 78], ['2016-02-08 19:15:01', 78], ['2016-02-08 19:30:02', 77], ['2016-02-08 19:45:02', 77], ['2016-02-08 20:00:01', 77], ['2016-02-08 20:15:02', 77], ['2016-02-08 20:30:01', 77], ['2016-02-08 20:45:01', 77], ['2016-02-08 21:00:02', 77], ['2016-02-08 21:15:01', 77], ['2016-02-08 21:30:02', 77], ['2016-02-08 21:45:02', 77], ['2016-02-08 22:00:02', 77], ['2016-02-08 22:15:02', 77], ['2016-02-08 22:30:01', 77], ['2016-02-08 22:45:01', 77], ['2016-02-08 23:00:01', 77], ['2016-02-08 23:15:02', 76], ['2016-02-08 23:30:02', 76], ['2016-02-08 23:45:01', 76], ['2016-02-09 00:00:02', 76], ['2016-02-09 00:15:01', 76], ['2016-02-09 00:30:02', 76], ['2016-02-09 00:45:01', 76], ['2016-02-09 01:00:02', 76], ['2016-02-09 01:15:01', 76], ['2016-02-09 01:30:01', 75], ['2016-02-09 01:45:01', 75], ['2016-02-09 01:49:09', 75], ['2016-02-09 02:00:01', 75], ['2016-02-09 02:15:02', 75], ['2016-02-09 02:30:02', 76], ['2016-02-09 02:45:02', 75], ['2016-02-09 03:00:01', 75], ['2016-02-09 03:15:02', 75], ['2016-02-09 03:30:02', 75], ['2016-02-09 03:45:02', 74], ['2016-02-09 04:00:01', 75], ['2016-02-09 04:15:01', 75], ['2016-02-09 04:30:02', 75], ['2016-02-09 04:45:02', 75], ['2016-02-09 05:00:02', 75], ['2016-02-09 05:15:01', 76], ['2016-02-09 05:30:01', 75], ['2016-02-09 05:45:02', 75], ['2016-02-09 06:00:02', 76], ['2016-02-09 06:15:02', 76], ['2016-02-09 06:30:01', 75], ['2016-02-09 06:39:58', 75], ['2016-02-09 06:45:01', 75], ['2016-02-09 07:00:01', 76], ['2016-02-09 07:15:02', 76], ['2016-02-09 07:30:02', 75] ]); var data3 = google.visualization.arrayToDataTable([ ['Time', 'Humidity'], ['2016-02-08 08:46:04', 35], ['2016-02-08 08:47:02', 35], ['2016-02-08 09:00:02', 36], ['2016-02-08 09:15:01', 36], ['2016-02-08 09:30:01', 35], ['2016-02-08 09:45:02', 35], ['2016-02-08 10:00:01', 35], ['2016-02-08 10:15:01', 35], ['2016-02-08 10:29:23', 34], ['2016-02-08 10:30:02', 34], ['2016-02-08 10:45:02', 35], ['2016-02-08 11:00:01', 36], ['2016-02-08 11:15:02', 34], ['2016-02-08 11:30:01', 34], ['2016-02-08 11:45:02', 34], ['2016-02-08 12:00:02', 35], ['2016-02-08 12:15:02', 34], ['2016-02-08 12:30:02', 34], ['2016-02-08 12:45:02', 34], ['2016-02-08 13:00:01', 34], ['2016-02-08 13:15:01', 34], ['2016-02-08 13:30:02', 33], ['2016-02-08 13:45:02', 33], ['2016-02-08 14:00:02', 34], ['2016-02-08 14:15:02', 33], ['2016-02-08 14:30:01', 32], ['2016-02-08 14:45:01', 32], ['2016-02-08 15:00:01', 33], ['2016-02-08 15:15:02', 31], ['2016-02-08 15:30:02', 31], ['2016-02-08 15:45:02', 32], ['2016-02-08 16:00:02', 32], ['2016-02-08 16:15:02', 32], ['2016-02-08 16:30:01', 31], ['2016-02-08 16:45:01', 33], ['2016-02-08 17:00:02', 31], ['2016-02-08 17:15:01', 30], ['2016-02-08 17:30:02', 29], ['2016-02-08 17:45:02', 31], ['2016-02-08 18:00:02', 31], ['2016-02-08 18:15:01', 31], ['2016-02-08 18:30:02', 31], ['2016-02-08 18:45:01', 31], ['2016-02-08 19:00:02', 31], ['2016-02-08 19:15:01', 31], ['2016-02-08 19:30:02', 32], ['2016-02-08 19:45:02', 31], ['2016-02-08 20:00:01', 31], ['2016-02-08 20:15:02', 32], ['2016-02-08 20:30:01', 32], ['2016-02-08 20:45:01', 34], ['2016-02-08 21:00:02', 33], ['2016-02-08 21:15:01', 33], ['2016-02-08 21:30:02', 32], ['2016-02-08 21:45:02', 31], ['2016-02-08 22:00:02', 31], ['2016-02-08 22:15:02', 30], ['2016-02-08 22:30:01', 29], ['2016-02-08 22:45:01', 30], ['2016-02-08 23:00:01', 30], ['2016-02-08 23:15:02', 29], ['2016-02-08 23:30:02', 28], ['2016-02-08 23:45:01', 27], ['2016-02-09 00:00:02', 29], ['2016-02-09 00:15:01', 30], ['2016-02-09 00:30:02', 30], ['2016-02-09 00:45:01', 32], ['2016-02-09 01:00:02', 32], ['2016-02-09 01:15:01', 32], ['2016-02-09 01:30:01', 32], ['2016-02-09 01:45:01', 33], ['2016-02-09 01:49:09', 33], ['2016-02-09 02:00:01', 33], ['2016-02-09 02:15:02', 32], ['2016-02-09 02:30:02', 32], ['2016-02-09 02:45:02', 32], ['2016-02-09 03:00:01', 32], ['2016-02-09 03:15:02', 32], ['2016-02-09 03:30:02', 32], ['2016-02-09 03:45:02', 32], ['2016-02-09 04:00:01', 33], ['2016-02-09 04:15:01', 33], ['2016-02-09 04:30:02', 33], ['2016-02-09 04:45:02', 32], ['2016-02-09 05:00:02', 32], ['2016-02-09 05:15:01', 31], ['2016-02-09 05:30:01', 32], ['2016-02-09 05:45:02', 31], ['2016-02-09 06:00:02', 30], ['2016-02-09 06:15:02', 30], ['2016-02-09 06:30:01', 31], ['2016-02-09 06:39:58', 30], ['2016-02-09 06:45:01', 30], ['2016-02-09 07:00:01', 29], ['2016-02-09 07:15:02', 29], ['2016-02-09 07:30:02', 29] ]); var data4 = google.visualization.arrayToDataTable([ ['Time', 'Pressure'], ['2016-02-08 08:46:04', 1018], ['2016-02-08 08:47:02', 1018], ['2016-02-08 09:00:02', 1018], ['2016-02-08 09:15:01', 1018], ['2016-02-08 09:30:01', 1018], ['2016-02-08 09:45:02', 1018], ['2016-02-08 10:00:01', 1018], ['2016-02-08 10:15:01', 1018], ['2016-02-08 10:29:23', 1018], ['2016-02-08 10:30:02', 1018], ['2016-02-08 10:45:02', 1019], ['2016-02-08 11:00:01', 1019], ['2016-02-08 11:15:02', 1019], ['2016-02-08 11:30:01', 1019], ['2016-02-08 11:45:02', 1020], ['2016-02-08 12:00:02', 1020], ['2016-02-08 12:15:02', 1020], ['2016-02-08 12:30:02', 1021], ['2016-02-08 12:45:02', 1021], ['2016-02-08 13:00:01', 1021], ['2016-02-08 13:15:01', 1021], ['2016-02-08 13:30:02', 1022], ['2016-02-08 13:45:02', 1022], ['2016-02-08 14:00:02', 1022], ['2016-02-08 14:15:02', 1022], ['2016-02-08 14:30:01', 1022], ['2016-02-08 14:45:01', 1023], ['2016-02-08 15:00:01', 1023], ['2016-02-08 15:15:02', 1023], ['2016-02-08 15:30:02', 1023], ['2016-02-08 15:45:02', 1023], ['2016-02-08 16:00:02', 1023], ['2016-02-08 16:15:02', 1023], ['2016-02-08 16:30:01', 1023], ['2016-02-08 16:45:01', 1023], ['2016-02-08 17:00:02', 1023], ['2016-02-08 17:15:01', 1023], ['2016-02-08 17:30:02', 1023], ['2016-02-08 17:45:02', 1022], ['2016-02-08 18:00:02', 1022], ['2016-02-08 18:15:01', 1022], ['2016-02-08 18:30:02', 1022], ['2016-02-08 18:45:01', 1022], ['2016-02-08 19:00:02', 1021], ['2016-02-08 19:15:01', 1021], ['2016-02-08 19:30:02', 1021], ['2016-02-08 19:45:02', 1020], ['2016-02-08 20:00:01', 1020], ['2016-02-08 20:15:02', 1020], ['2016-02-08 20:30:01', 1020], ['2016-02-08 20:45:01', 1019], ['2016-02-08 21:00:02', 1019], ['2016-02-08 21:15:01', 1019], ['2016-02-08 21:30:02', 1019], ['2016-02-08 21:45:02', 1019], ['2016-02-08 22:00:02', 1018], ['2016-02-08 22:15:02', 1019], ['2016-02-08 22:30:01', 1019], ['2016-02-08 22:45:01', 1019], ['2016-02-08 23:00:01', 1019], ['2016-02-08 23:15:02', 1019], ['2016-02-08 23:30:02', 1019], ['2016-02-08 23:45:01', 1019], ['2016-02-09 00:00:02', 1019], ['2016-02-09 00:15:01', 1019], ['2016-02-09 00:30:02', 1019], ['2016-02-09 00:45:01', 1020], ['2016-02-09 01:00:02', 1020], ['2016-02-09 01:15:01', 1020], ['2016-02-09 01:30:01', 1020], ['2016-02-09 01:45:01', 1020], ['2016-02-09 01:49:09', 1021], ['2016-02-09 02:00:01', 1021], ['2016-02-09 02:15:02', 1021], ['2016-02-09 02:30:02', 1021], ['2016-02-09 02:45:02', 1021], ['2016-02-09 03:00:01', 1021], ['2016-02-09 03:15:02', 1021], ['2016-02-09 03:30:02', 1021], ['2016-02-09 03:45:02', 1021], ['2016-02-09 04:00:01', 1021], ['2016-02-09 04:15:01', 1021], ['2016-02-09 04:30:02', 1021], ['2016-02-09 04:45:02', 1021], ['2016-02-09 05:00:02', 1022], ['2016-02-09 05:15:01', 1021], ['2016-02-09 05:30:01', 1021], ['2016-02-09 05:45:02', 1021], ['2016-02-09 06:00:02', 1021], ['2016-02-09 06:15:02', 1021], ['2016-02-09 06:30:01', 1021], ['2016-02-09 06:39:58', 1021], ['2016-02-09 06:45:01', 1021], ['2016-02-09 07:00:01', 1021], ['2016-02-09 07:15:02', 1021], ['2016-02-09 07:30:02', 1021] ]); var data2 = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Temp', 75.577], ['RH', 29.82] ]); var chart = new google.visualization.LineChart(document.getElementById('chart1')); chart.draw(data, options1); var options1 = { title: 'Outside Temperature', curveType: 'none', legend: { position: 'bottom'} }; var options3 = { title: 'Outside Humidity', curveType: 'none', legend: { position: 'bottom' } }; var options4 = { title: 'Outside Pressure', curveType: 'none', legend: { position: 'bottom' } }; var options2 = { redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var chart2 = new google.visualization.Gauge(document.getElementById('chart2')); chart2.draw(data2, options2); //////////////// var chart3 = new google.visualization.LineChart(document.getElementById('chart3')); chart3.draw(data3, options3); var chart4 = new google.visualization.LineChart(document.getElementById('chart4')); chart4.draw(data4, options4); } </script> </head> <body> </body> </html>

截图

1 answers

solution1
 1 ACCPTED  2016-02-10 09:37:27

Answers:

  1. First chart title is not visible since chart.draw function is called before options is getting initialized
  2. The same reason as specified in item 1
  3. X axis labels are not displayed since they are getting truncated, set chart size
  4. set option slantedTextAngle to set text angle , eg hAxis: { slantedText:true, slantedTextAngle:90 }

Modified example 

 google.charts.load('current', { 'packages': ['corechart', 'gauge'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Time', 'Temperature'], ['2016-02-08 08:46:04', 79], ['2016-02-08 08:47:02', 79], ['2016-02-08 09:00:02', 77], ['2016-02-08 09:15:01', 76], ['2016-02-08 09:30:01', 78], ['2016-02-08 09:45:02', 78], ['2016-02-08 10:00:01', 77], ['2016-02-08 10:15:01', 77], ['2016-02-08 10:29:23', 78], ['2016-02-08 10:30:02', 78], ['2016-02-08 10:45:02', 77], ['2016-02-08 11:00:01', 77], ['2016-02-08 11:15:02', 78], ['2016-02-08 11:30:01', 78], ['2016-02-08 11:45:02', 77], ['2016-02-08 12:00:02', 77], ['2016-02-08 12:15:02', 78], ['2016-02-08 12:30:02', 77], ['2016-02-08 12:45:02', 76], ['2016-02-08 13:00:01', 75], ['2016-02-08 13:15:01', 74], ['2016-02-08 13:30:02', 76], ['2016-02-08 13:45:02', 76], ['2016-02-08 14:00:02', 75], ['2016-02-08 14:15:02', 75], ['2016-02-08 14:30:01', 77], ['2016-02-08 14:45:01', 77], ['2016-02-08 15:00:01', 76], ['2016-02-08 15:15:02', 77], ['2016-02-08 15:30:02', 77], ['2016-02-08 15:45:02', 77], ['2016-02-08 16:00:02', 77], ['2016-02-08 16:15:02', 77], ['2016-02-08 16:30:01', 78], ['2016-02-08 16:45:01', 78], ['2016-02-08 17:00:02', 78], ['2016-02-08 17:15:01', 79], ['2016-02-08 17:30:02', 78], ['2016-02-08 17:45:02', 77], ['2016-02-08 18:00:02', 77], ['2016-02-08 18:15:01', 77], ['2016-02-08 18:30:02', 77], ['2016-02-08 18:45:01', 77], ['2016-02-08 19:00:02', 78], ['2016-02-08 19:15:01', 78], ['2016-02-08 19:30:02', 77], ['2016-02-08 19:45:02', 77], ['2016-02-08 20:00:01', 77], ['2016-02-08 20:15:02', 77], ['2016-02-08 20:30:01', 77], ['2016-02-08 20:45:01', 77], ['2016-02-08 21:00:02', 77], ['2016-02-08 21:15:01', 77], ['2016-02-08 21:30:02', 77], ['2016-02-08 21:45:02', 77], ['2016-02-08 22:00:02', 77], ['2016-02-08 22:15:02', 77], ['2016-02-08 22:30:01', 77], ['2016-02-08 22:45:01', 77], ['2016-02-08 23:00:01', 77], ['2016-02-08 23:15:02', 76], ['2016-02-08 23:30:02', 76], ['2016-02-08 23:45:01', 76], ['2016-02-09 00:00:02', 76], ['2016-02-09 00:15:01', 76], ['2016-02-09 00:30:02', 76], ['2016-02-09 00:45:01', 76], ['2016-02-09 01:00:02', 76], ['2016-02-09 01:15:01', 76], ['2016-02-09 01:30:01', 75], ['2016-02-09 01:45:01', 75], ['2016-02-09 01:49:09', 75], ['2016-02-09 02:00:01', 75], ['2016-02-09 02:15:02', 75], ['2016-02-09 02:30:02', 76], ['2016-02-09 02:45:02', 75], ['2016-02-09 03:00:01', 75], ['2016-02-09 03:15:02', 75], ['2016-02-09 03:30:02', 75], ['2016-02-09 03:45:02', 74], ['2016-02-09 04:00:01', 75], ['2016-02-09 04:15:01', 75], ['2016-02-09 04:30:02', 75], ['2016-02-09 04:45:02', 75], ['2016-02-09 05:00:02', 75], ['2016-02-09 05:15:01', 76], ['2016-02-09 05:30:01', 75], ['2016-02-09 05:45:02', 75], ['2016-02-09 06:00:02', 76], ['2016-02-09 06:15:02', 76], ['2016-02-09 06:30:01', 75], ['2016-02-09 06:39:58', 75], ['2016-02-09 06:45:01', 75], ['2016-02-09 07:00:01', 76], ['2016-02-09 07:15:02', 76], ['2016-02-09 07:30:02', 75] ]); var data3 = google.visualization.arrayToDataTable([ ['Time', 'Humidity'], ['2016-02-08 08:46:04', 35], ['2016-02-08 08:47:02', 35], ['2016-02-08 09:00:02', 36], ['2016-02-08 09:15:01', 36], ['2016-02-08 09:30:01', 35], ['2016-02-08 09:45:02', 35], ['2016-02-08 10:00:01', 35], ['2016-02-08 10:15:01', 35], ['2016-02-08 10:29:23', 34], ['2016-02-08 10:30:02', 34], ['2016-02-08 10:45:02', 35], ['2016-02-08 11:00:01', 36], ['2016-02-08 11:15:02', 34], ['2016-02-08 11:30:01', 34], ['2016-02-08 11:45:02', 34], ['2016-02-08 12:00:02', 35], ['2016-02-08 12:15:02', 34], ['2016-02-08 12:30:02', 34], ['2016-02-08 12:45:02', 34], ['2016-02-08 13:00:01', 34], ['2016-02-08 13:15:01', 34], ['2016-02-08 13:30:02', 33], ['2016-02-08 13:45:02', 33], ['2016-02-08 14:00:02', 34], ['2016-02-08 14:15:02', 33], ['2016-02-08 14:30:01', 32], ['2016-02-08 14:45:01', 32], ['2016-02-08 15:00:01', 33], ['2016-02-08 15:15:02', 31], ['2016-02-08 15:30:02', 31], ['2016-02-08 15:45:02', 32], ['2016-02-08 16:00:02', 32], ['2016-02-08 16:15:02', 32], ['2016-02-08 16:30:01', 31], ['2016-02-08 16:45:01', 33], ['2016-02-08 17:00:02', 31], ['2016-02-08 17:15:01', 30], ['2016-02-08 17:30:02', 29], ['2016-02-08 17:45:02', 31], ['2016-02-08 18:00:02', 31], ['2016-02-08 18:15:01', 31], ['2016-02-08 18:30:02', 31], ['2016-02-08 18:45:01', 31], ['2016-02-08 19:00:02', 31], ['2016-02-08 19:15:01', 31], ['2016-02-08 19:30:02', 32], ['2016-02-08 19:45:02', 31], ['2016-02-08 20:00:01', 31], ['2016-02-08 20:15:02', 32], ['2016-02-08 20:30:01', 32], ['2016-02-08 20:45:01', 34], ['2016-02-08 21:00:02', 33], ['2016-02-08 21:15:01', 33], ['2016-02-08 21:30:02', 32], ['2016-02-08 21:45:02', 31], ['2016-02-08 22:00:02', 31], ['2016-02-08 22:15:02', 30], ['2016-02-08 22:30:01', 29], ['2016-02-08 22:45:01', 30], ['2016-02-08 23:00:01', 30], ['2016-02-08 23:15:02', 29], ['2016-02-08 23:30:02', 28], ['2016-02-08 23:45:01', 27], ['2016-02-09 00:00:02', 29], ['2016-02-09 00:15:01', 30], ['2016-02-09 00:30:02', 30], ['2016-02-09 00:45:01', 32], ['2016-02-09 01:00:02', 32], ['2016-02-09 01:15:01', 32], ['2016-02-09 01:30:01', 32], ['2016-02-09 01:45:01', 33], ['2016-02-09 01:49:09', 33], ['2016-02-09 02:00:01', 33], ['2016-02-09 02:15:02', 32], ['2016-02-09 02:30:02', 32], ['2016-02-09 02:45:02', 32], ['2016-02-09 03:00:01', 32], ['2016-02-09 03:15:02', 32], ['2016-02-09 03:30:02', 32], ['2016-02-09 03:45:02', 32], ['2016-02-09 04:00:01', 33], ['2016-02-09 04:15:01', 33], ['2016-02-09 04:30:02', 33], ['2016-02-09 04:45:02', 32], ['2016-02-09 05:00:02', 32], ['2016-02-09 05:15:01', 31], ['2016-02-09 05:30:01', 32], ['2016-02-09 05:45:02', 31], ['2016-02-09 06:00:02', 30], ['2016-02-09 06:15:02', 30], ['2016-02-09 06:30:01', 31], ['2016-02-09 06:39:58', 30], ['2016-02-09 06:45:01', 30], ['2016-02-09 07:00:01', 29], ['2016-02-09 07:15:02', 29], ['2016-02-09 07:30:02', 29] ]); var data4 = google.visualization.arrayToDataTable([ ['Time', 'Pressure'], ['2016-02-08 08:46:04', 1018], ['2016-02-08 08:47:02', 1018], ['2016-02-08 09:00:02', 1018], ['2016-02-08 09:15:01', 1018], ['2016-02-08 09:30:01', 1018], ['2016-02-08 09:45:02', 1018], ['2016-02-08 10:00:01', 1018], ['2016-02-08 10:15:01', 1018], ['2016-02-08 10:29:23', 1018], ['2016-02-08 10:30:02', 1018], ['2016-02-08 10:45:02', 1019], ['2016-02-08 11:00:01', 1019], ['2016-02-08 11:15:02', 1019], ['2016-02-08 11:30:01', 1019], ['2016-02-08 11:45:02', 1020], ['2016-02-08 12:00:02', 1020], ['2016-02-08 12:15:02', 1020], ['2016-02-08 12:30:02', 1021], ['2016-02-08 12:45:02', 1021], ['2016-02-08 13:00:01', 1021], ['2016-02-08 13:15:01', 1021], ['2016-02-08 13:30:02', 1022], ['2016-02-08 13:45:02', 1022], ['2016-02-08 14:00:02', 1022], ['2016-02-08 14:15:02', 1022], ['2016-02-08 14:30:01', 1022], ['2016-02-08 14:45:01', 1023], ['2016-02-08 15:00:01', 1023], ['2016-02-08 15:15:02', 1023], ['2016-02-08 15:30:02', 1023], ['2016-02-08 15:45:02', 1023], ['2016-02-08 16:00:02', 1023], ['2016-02-08 16:15:02', 1023], ['2016-02-08 16:30:01', 1023], ['2016-02-08 16:45:01', 1023], ['2016-02-08 17:00:02', 1023], ['2016-02-08 17:15:01', 1023], ['2016-02-08 17:30:02', 1023], ['2016-02-08 17:45:02', 1022], ['2016-02-08 18:00:02', 1022], ['2016-02-08 18:15:01', 1022], ['2016-02-08 18:30:02', 1022], ['2016-02-08 18:45:01', 1022], ['2016-02-08 19:00:02', 1021], ['2016-02-08 19:15:01', 1021], ['2016-02-08 19:30:02', 1021], ['2016-02-08 19:45:02', 1020], ['2016-02-08 20:00:01', 1020], ['2016-02-08 20:15:02', 1020], ['2016-02-08 20:30:01', 1020], ['2016-02-08 20:45:01', 1019], ['2016-02-08 21:00:02', 1019], ['2016-02-08 21:15:01', 1019], ['2016-02-08 21:30:02', 1019], ['2016-02-08 21:45:02', 1019], ['2016-02-08 22:00:02', 1018], ['2016-02-08 22:15:02', 1019], ['2016-02-08 22:30:01', 1019], ['2016-02-08 22:45:01', 1019], ['2016-02-08 23:00:01', 1019], ['2016-02-08 23:15:02', 1019], ['2016-02-08 23:30:02', 1019], ['2016-02-08 23:45:01', 1019], ['2016-02-09 00:00:02', 1019], ['2016-02-09 00:15:01', 1019], ['2016-02-09 00:30:02', 1019], ['2016-02-09 00:45:01', 1020], ['2016-02-09 01:00:02', 1020], ['2016-02-09 01:15:01', 1020], ['2016-02-09 01:30:01', 1020], ['2016-02-09 01:45:01', 1020], ['2016-02-09 01:49:09', 1021], ['2016-02-09 02:00:01', 1021], ['2016-02-09 02:15:02', 1021], ['2016-02-09 02:30:02', 1021], ['2016-02-09 02:45:02', 1021], ['2016-02-09 03:00:01', 1021], ['2016-02-09 03:15:02', 1021], ['2016-02-09 03:30:02', 1021], ['2016-02-09 03:45:02', 1021], ['2016-02-09 04:00:01', 1021], ['2016-02-09 04:15:01', 1021], ['2016-02-09 04:30:02', 1021], ['2016-02-09 04:45:02', 1021], ['2016-02-09 05:00:02', 1022], ['2016-02-09 05:15:01', 1021], ['2016-02-09 05:30:01', 1021], ['2016-02-09 05:45:02', 1021], ['2016-02-09 06:00:02', 1021], ['2016-02-09 06:15:02', 1021], ['2016-02-09 06:30:01', 1021], ['2016-02-09 06:39:58', 1021], ['2016-02-09 06:45:01', 1021], ['2016-02-09 07:00:01', 1021], ['2016-02-09 07:15:02', 1021], ['2016-02-09 07:30:02', 1021] ]); var data2 = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Temp', 75.577], ['RH', 29.82] ]); var options1 = { title: 'Outside Temperature', curveType: 'none', legend: { position: 'bottom' }, chartArea:{top:0,height:200}, hAxis: { slantedText:true, slantedTextAngle:90 }, }; var options3 = { title: 'Outside Humidity', curveType: 'none', legend: { position: 'bottom' }, chartArea:{top:0,height:200}, hAxis: { slantedText:true, slantedTextAngle:90 } }; var options4 = { title: 'Outside Pressure', curveType: 'none', legend: { position: 'bottom' }, chartArea:{top:0,height:200}, hAxis: { slantedText:true, slantedTextAngle:90 } }; var options2 = { redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.LineChart(document.getElementById('chart1')); chart.draw(data, options1); var chart2 = new google.visualization.Gauge(document.getElementById('chart2')); chart2.draw(data2, options2); //////////////// var chart3 = new google.visualization.LineChart(document.getElementById('chart3')); chart3.draw(data3, options3); var chart4 = new google.visualization.LineChart(document.getElementById('chart4')); chart4.draw(data4, options4); } 
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart1" style="height:400px"></div> <div id="chart2"></div> <div id="chart3" style="height:400px"></div> <div id="chart4" style="height:400px"></div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google chart not showing Axis? How do I add text to google charts column chart axis? Center align title in Google Chart Google chart show title as label Center Align Title Google Chart Google chart y axis customization Google Chart - Timelines: Scaling Axis Candlestick-Chart with title on x axis Chart.js Chart Formatting - Legend & Y Axis & Title Problems loading the third google chart
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM