在一个页面上绘制多个谷歌图表？

Question

基本上，我的 JavaScript 接收如下数据：year = {month1, ...., month12}。每个月存储 3 个图表的数据。 month1 = {graph1_data,..., graph3_data}

我希望使用 Google Charts 为所有人绘制图表。所以这使它成为 12 * 3 = 36 个图表。我编写了以下代码逻辑。但它不起作用。

for ( month in year )
{
    google.charts.setOnLoadCallback(function(){
           // draw graph1
            var data = new google.visualization.DataTable();
            // code
            // code
            // data.addColumn()
            // data.addColumn()
            data.addRows(data_table);
            var options = {title: month, height:100};
            var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph1'));
            chart.draw(data, options);
    });

    google.charts.setOnLoadCallback(function(){
           // draw graph2
            google.charts.setOnLoadCallback(function(){

            var data = new google.visualization.DataTable();
            // code
            // code
            // data.addColumn()
            // data.addColumn()
            data.addRows(data_table);
            var options = {title: month, height:100};
            var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph2'));
            chart.draw(data, options);
    });

    google.charts.setOnLoadCallback(function(){
           // draw graph3
           google.charts.setOnLoadCallback(function(){

            var data = new google.visualization.DataTable();
            // code
            // code
            // data.addColumn()
            // data.addColumn()
            data.addRows(data_table);
            var options = {title: month, height:100};
            var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph3));
            chart.draw(data, options);
    });
}  

它为month12 绘制了 3 个图表。现在为什么会发生这种情况？这是否意味着我必须拨打setOnLoadCallback 36 次？难道就没有其他办法了吗？

编辑 看起来一旦加载了 Google Chart API，所有setOnLoadCallbacks 中的回调都会被调用一次。这可能解释了为什么我只得到一张图表，因为在执行函数时，循环会在 month12 处停止。

Answer 1

所以我终于弄清楚这里出了什么问题。

您只是注册使用 Google Charts API 的回调，而不是在您的 for(month in year) 循环中真正调用它。当相关资源完成加载并且 Charts API 可以开始绘制时，将调用回调（您可以猜到）。不幸的是，您全局定义的 var month 现在等于 month12。这是 for 循环完成后的状态：

month = year.month12;
callback_for_graph_1 = <anonymous function 1>
callback_for_graph_2 = <anonymous function 2>
callback_for_graph_3 = <anonymous function 3>

你可以想象，现在当回调时，它们每个都只被调用一次，month = year.month12。因此，这三个图表都包含month12 数据。

那么你如何解决这个问题？方法如下：

1. 只初始化三个回调一次。无需让他们匿名。

   google.charts.setOnLoadCallback(callbackForGraph1);
   google.charts.setOnLoadCallback(callbackForGraph2);
   google.charts.setOnLoadCallback(callbackForGraph3);
   
   function callbackForGraph1 {
   // do your thing
   }
   function callbackForGraph2 {
   // do your thing
   }
   function callbackForGraph3 {
   // do your thing
   }
   

2. 遍历每个回调中的所有月份，并为每个月创建一个新的 Chart 实例。也画出来。

   function callbackForGraph1() {
     for(month in year) {
       // draw graph1
       var data = new google.visualization.DataTable();
       // code
       // code
       // data.addColumn()
       // data.addColumn()
       data.addRows(data_table);
       var options = {title: month, height:100};
       // this is your Chart instance ->
       var chart = new google.visualization.ColumnChart(document.querySelector('#'+month+' .graph1'));
       // draw it!
       chart.draw(data, options);
     }
   }
   

3. 利润？

您可能还希望将每个 Chart 实例存储在数组或字典样式对象中。这样您以后就可以对绘图进行更改，而不必重新生成和替换它们。

---

旧答案： 这是因为您在每个月的同一 HTML 元素中为 graph_1 绘制图表。因此graph_1[month2] 的图表将覆盖graph_1[month1] 的图表。由于graph_1[month12] 是要处理的最后一个数据，因此您将获得month12 的图表。 graph_2 和 graph_3 也是如此。

您可以尝试在每次调用绘图回调时将新的svg 或vml 元素附加到您的HTML document。这可以从回调本身内部完成。这样您就可以为每个图表获得每个月的新图表。