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后，所有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数据。

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

仅在一次时初始化三个回调。不需要匿名。

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
}

迭代每个回调中的所有月份，并为每个月创建一个新的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);
  }
}

利润？

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

OLD ANSWER：这是因为您在每个月的同一HTML元素中绘制graph_1的图表。因此graph_1[month2]的图表会覆盖graph_1[month1]的图表。由于graph_1[month12]是要处理的最后一个数据，因此您可以获得month12的图表。同样适用于graph_2和graph_3。

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

在一个页面上绘制多个Google Charts？

1 个答案: