试图在一页上获得多个Google图表，但是没有运气

Question

Ive been doing some research on stackoverflow however I cant seem to pinpoint my problem. 我一直在做一些关于stackoverflow的研究，但是我似乎无法指出我的问题。 This code worked for a little bit but it stopped working almost as fast. 这段代码虽然工作了一点，但是却几乎停止了工作。 I am trying to get 3 google charts to show up on one page. 我正在尝试使3个Google图表显示在一页上。 Is there something wrong with the code? 代码有问题吗？

Here it is below 在这里

<html>

<head>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {
      'packages': ['line', 'corechart']
    });

     // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

     // Callback that creates and populates a data table,
     // instantiates the pie chart, passes in the data and
     // draws it.
    function drawChart() {
      var chart0 = document.getElementById('curve_chart0');
      var data0 = new google.visualization.DataTable();
      data0.addColumn('string', '');
      data0.addColumn('number', 'Altitude');
      data0.addColumn('number', 'Speed');
      data0.addRows([
        ['05:22:57', 6519, 0],
        ['05:24:00', 6519, 0],
        ['05:24:57', 6519, 0],
        ['05:25:57', 6519, 0],
        ['05:26:57', 6519, 0],
        ['05:27:58', 6519, 0],
        ['05:28:57', 6519, 0],
        ['05:29:58', 6519, 0],
        ['05:30:58', 6519, 0],
        ['05:31:58', 6519, 11],
        ['05:32:58', 6519, 0],
        ['05:33:58', 6519, 11]
      ]);



      var options0 = {
        chart: {

        },
        legend: {
          position: 'none'
        },
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {
            axis: 'Altitude'
          },
          1: {
            axis: 'Speed'
          }
        },
        width: 400,
        height: 150,
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Altitude: {
              label: 'Altitude'
            },
            Speed: {
              label: 'Speed'
            }
          }
        }
      };

      chart0 = new google.charts.Line(document.getElementById('curve_chart0'));

      chart0.draw(data0, options0);

      var chart1 = document.getElementById('curve_chart1');

      var data1 = new google.visualization.DataTable();
      data1.addColumn('string', '');
      data1.addColumn('number', 'Altitude');
      data1.addColumn('number', 'Speed');
      data1.addRows([
        ['05:39:58', 116, 0],
        ['05:40:58', 116, 0],
        ['05:41:58', 116, 0],
        ['05:42:58', 116, 0],
        ['05:43:58', 116, 0],
        ['05:44:59', 116, 1],
        ['05:45:59', 116, 0],
        ['05:46:59', 116, 0],
        ['05:47:59', 116, 0],
        ['05:48:59', 116, 33],
        ['05:49:59', 116, 19],
        ['05:50:59', 116, 21],
        ['05:51:59', 116, 7],
        ['05:52:59', 116, 85],
        ['05:53:59', 3019, 196]
      ]);

      var options1 = {
        chart: {

        },
        legend: {
          position: 'none'
        },
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {
            axis: 'Altitude'
          },
          1: {
            axis: 'Speed'
          }
        },
        width: 400,
        height: 150,
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Altitude: {
              label: 'Altitude'
            },
            Speed: {
              label: 'Speed'
            }
          }
        }
      };

      chart1 = new google.charts.Line(document.getElementById('curve_chart1'));

      chart1.draw(data1, options1);

      var chart2 = document.getElementById('curve_chart2');

      var data2 = new google.visualization.DataTable();
      data2.addColumn('string', '');
      data2.addColumn('number', 'Altitude');
      data2.addColumn('number', 'Speed');
      data2.addRows([
        ['23:58:54', 30, 0],
        ['23:59:54', 30, 0],
        ['00:00:54', 30, 1],
        ['00:01:54', 30, 1],
        ['00:02:54', 30, 0],
        ['00:03:54', 30, 0],
        ['00:04:54', 30, 0],
        ['00:05:54', 30, 13],
        ['00:06:54', 30, 17],
        ['00:07:54', 30, 21],
        ['00:08:54', 30, 5],
        ['00:09:55', 316, 178],
        ['00:10:55', 3770, 209],
        ['00:11:55', 6308, 241]
      ]);

      var options2 = {
        chart: {

        },
        legend: {
          position: 'none'
        },
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {
            axis: 'Altitude'
          },
          1: {
            axis: 'Speed'
          }
        },
        width: 400,
        height: 150,
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Altitude: {
              label: 'Altitude'
            },
            Speed: {
              label: 'Speed'
            }
          }
        }
      };

      chart2 = new google.charts.Line(document.getElementById('curve_chart2'));
      chart2.draw(data2, options2);
    }
  </script>
</head>

<body>
  <!--Divs that will hold the charts-->
  <div id="curve_chart0"></div>
  <div id="curve_chart1"></div>
  <div id="curve_chart2"></div>
</body>

</html>

Answer 1

Try this it works:- 试试这个，它的工作原理：-

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
  <script type="text/javascript">
google.load('visualization', '1.0', { packages: ['line'] });
google.setOnLoadCallback(drawCharts);

function drawPageViews(chartReady) {
    var data = new google.visualization.DataTable();
    var div2 = document.getElementById("div2");
    var labels = ['m', 'n', 'o', 'p', 'q', 'r', 's'];

    data.addColumn('string', 'Day');
    data.addColumn('number', 'PageViews');


    var rows = new Array();
    for (var i = 0; i < labels.length; i++) {
        rows.push([labels[i], getRandomInt(0, 100)]);
    }
    data.addRows(rows);


    var options = {
        chart: {
            title: 'Page views'
        },
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('div2'));
    if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

function drawEventViews(chartReady) {
    var data = new google.visualization.DataTable();
    var div1 = document.getElementById("div1");

    var labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

    data.addColumn('string', 'Day');
    data.addColumn('number', 'EventViews');
    var rows = new Array();
    for (var i = 0; i < labels.length; i++) {
        rows.push([labels[i], getRandomInt(0, 100)]);
    }
    data.addRows(rows);

    var options = {
        chart: {
            title: 'Event views'
        },
        width: 500,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('div1'));
    if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
    chart.draw(data, options);
}

function drawCharts() {
    drawPageViews(function(){
        drawEventViews();
    });
}


function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
  </script>
</head>
<body>
<div id="div2"></div>
<div id="div1"></div>
</body>
</html>

Answer 2

The following displays as you want though it uses the classical charts. 尽管使用经典图表，但仍会显示以下内容。

 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', { 'packages': ['line', 'corechart'] }); google.setOnLoadCallback(drawChart); function graph(div,data) { var data0 = new google.visualization.DataTable(); data0.addColumn('string', ''); data0.addColumn('number', 'Altitude'); data0.addColumn('number', 'Speed'); data0.addRows(data); var options = { chart: { }, legend: { position: 'none' }, series: { // Gives each series an axis name that matches the Y-axis below. 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, width: 400, height: 150, vAxes: { // Adds labels to each axis; they don't have to match the axis names. 0: {title: 'Altitude'}, 1: {title: 'Speed'} } }; var chart0 = new google.visualization.LineChart(document.getElementById(div)); chart0.draw(data0, options); } // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { graph('curve_chart0',[ ['05:22:57', 6519, 0], ['05:24:00', 6519, 0], ['05:24:57', 6519, 0], ['05:25:57', 6519, 0], ['05:26:57', 6519, 0], ['05:27:58', 6519, 0], ['05:28:57', 6519, 0], ['05:29:58', 6519, 0], ['05:30:58', 6519, 0], ['05:31:58', 6519, 11], ['05:32:58', 6519, 0], ['05:33:58', 6519, 11] ]); graph('curve_chart1',[ ['05:39:58', 116, 0], ['05:40:58', 116, 0], ['05:41:58', 116, 0], ['05:42:58', 116, 0], ['05:43:58', 116, 0], ['05:44:59', 116, 1], ['05:45:59', 116, 0], ['05:46:59', 116, 0], ['05:47:59', 116, 0], ['05:48:59', 116, 33], ['05:49:59', 116, 19], ['05:50:59', 116, 21], ['05:51:59', 116, 7], ['05:52:59', 116, 85], ['05:53:59', 3019, 196] ]); graph('curve_chart2',[ ['23:58:54', 30, 0], ['23:59:54', 30, 0], ['00:00:54', 30, 1], ['00:01:54', 30, 1], ['00:02:54', 30, 0], ['00:03:54', 30, 0], ['00:04:54', 30, 0], ['00:05:54', 30, 13], ['00:06:54', 30, 17], ['00:07:54', 30, 21], ['00:08:54', 30, 5], ['00:09:55', 316, 178], ['00:10:55', 3770, 209], ['00:11:55', 6308, 241] ]); } </script> </head> <body> <!--Divs that will hold the charts--> <div id="curve_chart0"></div> <div id="curve_chart1"></div> <div id="curve_chart2"></div> </body> </html>

试图在一页上获得多个Google图表，但是没有运气

问题描述

2 个解决方案

解决方案1
0 2015-10-20 07:01:03

解决方案2
0 已采纳 2015-10-20 07:50:17

试图在一页上获得多个Google图表，但是没有运气

问题描述

2 个解决方案

解决方案1 0 2015-10-20 07:01:03

解决方案2 0 已采纳 2015-10-20 07:50:17

解决方案1
0 2015-10-20 07:01:03

解决方案2
0 已采纳 2015-10-20 07:50:17