在单个页面上绘制多个Google图表？

Question

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

我希望使用Google图表为所有图表绘制图表。 因此，它成为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，所有setOnLoadCallback的回调都将被调用一次。 这可能解释了为什么我只得到一张图，因为在执行该函数时，循环将在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实例存储在数组或字典样式对象中。 这样，您以后就可以更改图，而不必重新生成和替换它们。

---

老答案：发生这种情况是因为您graph_1在同一HTML元素中绘制graph_1的图表。 因此，对于图graph_1[month2]将覆盖图表graph_1[month1] 由于graph_1[month12]是最后要处理的数据，因此您将获得month12的图表。 对于graph_2和graph_3同样发生。

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