Javascriptで複数のGoogle Chartsを再帰的に作成する

Question

以下のコードを使用して複数のGoogle Chartsを再帰的に作成しようとしています。私は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 - または似たような...など

、お勧めのロード最初にGoogle以下のように、何か他のものの前に、
はその後、その後、グラフを描き、データを取得するために、AJAXを使用して...

は

... load文で callbackを配置し、同様の設定を試してみてください

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); 
    } 
}