试图在一页上获得多个 Google 图表，但没有成功

Question

我一直在对 Whosebug 进行一些研究，但我似乎无法查明我的问题。这段代码工作了一点，但它停止工作的速度几乎一样快。我试图让 3 google 个图表显示在一页上。代码有问题吗？

下面是

<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

试试这个有效：-

<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

下面虽然用的是经典图表，但随心所欲。

<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 图表，但没有成功

Trying to get multiple Google Charts on one page, no luck

javascript

php

arrays

charts

maps