Google Charts API - 页面上只有一个图表呈现两个图表答案

【问题标题】：Google Charts API - Only one chart rendered on page with two chartsGoogle Charts API - 页面上只有一个图表呈现两个图表
【发布时间】：2017-06-16 15:10:09
【问题描述】：

我正在尝试在一个页面中包含 2 个图表。一个是折线图，另一个是散点图。我已经按照 Google Charts' API 上的指南在单个页面上实现多个图表，使用单个回调函数但是在任何给定时间只会出现一个图表。真正奇怪的是，左边的折线图出现在 Safari 上，右边的散点图出现在 Chrome 上。

head部分创建图表的代码如下。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 728, 1065, 112, 73 , 12, 134],
      ['16:00', 943, 1056, 122, 112 , 9, 116],
      ['17:00', 1280, 1069, 156, 99 , 26, 196],
      ['18:00', 1276, 1277, 154, 134 , 9, 204],
      ['19:00', 1235, 984, 84, 109 , 10, 134],
      ['20:00', 1133, 1028, 83, 74 , 20, 73],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
      ['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
      ['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
      ['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
      ['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
      ['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

chartLine.draw(dataLine, optionsLine);

var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

chartScatter.draw(dataScatter, optionsScatter);
}
</script>

【问题讨论】：

控制台中是否出现任何错误。如果添加第三张图表（其他两张图表之一的副本）会怎样？
@Halcyon 控制台中没有错误。如果我添加第三个和第四个，它仍然只显示 1。更奇怪的是，如果我添加第三个，现在 chrome 也只显示折线图。
我做了一个 JSFiddle。它对我来说很好用：jsfiddle.net/asoe1o1x screencap：imgur.com/a/V8SkJ
@Halcyon 我刚刚创建了一个 jsfiddle，它在那里工作，所以问题一定是我页面上的其他问题。
@Halcyon 我刚刚对其进行了进一步测试，似乎chart.draw() 先出现的东西都会呈现，而另一个则不会。不过，这似乎不是 JsFiddle 的问题。

标签： javascript google-visualization

【解决方案1】：

看起来 chart.draw 函数一次只能调用一个，但由于它是异步的，它会立即返回并尝试立即调用第二个。答案是使用google.visualization.events.addOneTimeListener() 在第一个之后调用第二个chart.draw。

完成代码：

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

  function drawChart() {
    var dataLine = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 938, 1018, 191, 49 , 33, 66],
      ['22:00', 1038, 952, 163, 72 , 27, 79],
      ['23:00', 851, 807, 156, 57 , 11, 79],
      ['00:00', 390, 455, 89, 24 , 9, 41],
      ['01:00', 195, 270, 13, 13 , 5, 13],
      ['02:00', 92, 140, 18, 2 , 0, 7],
      ['03:00', 86, 73, 7, 2 , 1, 2],
      ['04:00', 136, 49, 8, 3 , 1, 8],
      ['05:00', 99, 86, 10, 3 , 0, 5],
      ['06:00', 230, 200, 15, 8 , 5, 12],
      ['07:00', 531, 461, 49, 39 , 4, 40],
      ['08:00', 605, 683, 152, 67 , 13, 96],
      ['09:00', 528, 800, 111, 78 , 17, 53],
      ['10:00', 716, 885, 75, 68 , 14, 76],
      ['11:00', 1102, 768, 66, 50 , 15, 46],
      ['12:00', 1015, 695, 41, 47 , 18, 49],
      ['13:00', 856, 624, 52, 95 , 18, 73],
      ['14:00', 779, 524, 32, 30 , 21, 70],
      ['15:00', 587, 533, 30, 161 , 19, 46],
      ['16:00', 580, 566, 59, 78 , 13, 56],
      ['17:00', 1041, 658, 23, 67 , 13, 39],
      ['18:00', 1835, 807, 22, 72 , 7, 65],
      ['19:00', 1603, 630, 35, 116 , 9, 126],
      ['20:00', 1898, 614, 26, 135 , 11, 110]
    ]);

    var optionsLine = {
      title: '',
      curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      vAxis: {
      viewWindow: {
        min: 0
      }
    },
    };

    var dataScatter = google.visualization.arrayToDataTable([
      ['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
      ['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
      ['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
      ['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
      ['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
      ['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
      ['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
      ['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
      ['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
      ['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
      ['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
      ['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
      ['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
      ['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
      ['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
      ['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
      ['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
      ['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
      ['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881],
      ['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875],
      ['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375],
      ['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205],
      ['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275],
      ['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3],
      ['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375]
    ]);

    var optionsScatter = {
      title: '',
      vAxis: { minValue: -1.0, maxValue: 1.0},
      colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
      theme: 'material',
      legend: {position: 'bottom'}
    };


    var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));

    google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){
         //render chart2 once chart1 is rendered
         var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));

         chartLine.draw(dataLine, optionsLine);
    });


    chartScatter.draw(dataScatter, optionsScatter);

}
</script>

【讨论】：

图表绘制函数一次可以调用多个。多个图形之间不应有任何干扰，除非您可能正在共享数据或选项，而您不是。其他人说他们可以让你的例子在 jsfiddle 中工作，所以我不知道你为什么需要链接它们。也许是关于您的 html 或页面上的其他内容。顺便说一句，ScatterChart 是一个“核心图表”，因此您不需要为它加载“scatter”。
@dlaliberte 这似乎是一个时间问题。您可以调用多个 chart.draw() 但如果第一个在第二个之前没有完成，它不喜欢它。服务器相当慢，带宽限制也相当低，所以我认为这可能是导致问题的原因，因为当我在更快的服务器上运行相同的代码时它工作正常。