javascript - 在 Javascript 中递归创建多个 Google Charts

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 每次页面加载时只应调用一次，
一旦触发，您可以根据需要绘制尽可能多的图表...

您还可以依赖于回调来了解页面何时准备就绪，
而不是 --> $(document).ready -- 或者类似的东西......

因此，建议先加载 google，然后再加载，
然后用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);
  }
}