在Javascript中递归地创建多个Google图表

Question

我试图用下面的代码递归地创建多个Google图表。我使用AJAX来获取图表数据并将其存储在数组histogramData中。

使用此代码，我可以创建多个i_histogram图表，但显然，在每次循环交互时，上一个图表会被最后一个图表覆盖。

HTML代码：

<div id="histogramCharts"></div> 

Javascript代码：

var histogramChartElement = document.getElementById('histogramCharts'); 
// remove histogram chart element children 
while (histogramChartElement.hasChildNodes()) { 
    histogramChartElement.removeChild(histogramChartElement.childNodes[0]); 
} 

for (var i = 0; i < histogramLabels.length; i++) { 
    var label = histogramLabels[i]; 
    var node = document.createElement('div'); 

    node.setAttribute('id', i + '_histogram'); 

    histogramChartElement.appendChild(node); 

    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'A'); 
    dataTable.addColumn('number', 'B'); 
    dataTable.addRows(histogramData[i]); 

    google.charts.setOnLoadCallback(function() { 
     var options = { 
      title: histogramLabels[i], 
      legend: {position: 'none'}, 
      histogram: {bucketSize: 0.1} 
     }; 
     var histogramChart = new google.visualization.Histogram(node); 
     histogramChart.draw(dataTable, options); 
    }); 
} 

我得到了这样的结果：

<div id="histogramCharts"> 
    <div id="0_histogram"></div> 
    <div id="1_histogram"></div> 
    <div id="2_histogram"> 
     <div style="position: relative;">....</div> 
    </div> 
</div> 

Answer 1

第一，setOnLoadCallback只应每个页面加载调用一次，
一旦发生火灾，你可以画出许多图表需要...

你也可以取决于callback知道什么时候该页面已准备就绪，
代替 - >$(document).ready - 或者类似的东西...

因为如此，建议装载谷歌第一之前别的，
然后使用AJAX来获取数据，然后绘制图表...

尝试类似的设置如下，放置callback在load声明...

google.charts.load('current', { 
    callback: getData, 
    packages:['corechart'] 
}); 

function getData() { 
    $.ajax({ 
    url: '...', 
    }).done(drawCharts); 
} 

function drawCharts(data) { 

    // use data to build histogramData 

    var histogramChartElement = document.getElementById('histogramCharts'); 
    // remove histogram chart element children 
    while (histogramChartElement.hasChildNodes()) { 
     histogramChartElement.removeChild(histogramChartElement.childNodes[0]); 
    } 

    for (var i = 0; i < histogramLabels.length; i++) { 
     var label = histogramLabels[i]; 
     var node = document.createElement('div'); 

     node.setAttribute('id', i + '_histogram'); 

     histogramChartElement.appendChild(node); 

     var dataTable = new google.visualization.DataTable(); 
     dataTable.addColumn('string', 'A'); 
     dataTable.addColumn('number', 'B'); 
     dataTable.addRows(histogramData[i]); 

     var options = { 
      title: histogramLabels[i], 
      legend: {position: 'none'}, 
      histogram: {bucketSize: 0.1} 
     }; 
     var histogramChart = new google.visualization.Histogram(node); 
     histogramChart.draw(dataTable, options); 
    } 
}