在for循环中绘制多个谷歌图表 [英] Draw multiple Google charts in for loop

问题描述

我试图在 for 循环中绘制多个 Google 图表，但似乎无法使其工作.我看到有人问过一些类似的问题，但仅限于 PHP.任何人都可以提供帮助?这是我迄今为止尝试过的https://jsfiddle.net/8nfbz1v1/

I am trying to draw multiple Google charts in a for loop, but can't seem to make it work. I have seen some similar questions being asked, but only with PHP. Anyone who can help? This is what I have tried so far https://jsfiddle.net/8nfbz1v1/

        <ul id="draw-charts"></ul>

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

for(var i = 0; i>6; i+){
var charts = "";
    google.charts.setOnLoadCallback(drawChart);

  function drawCharts() {

  charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>';
  $("#draw-charts").html(charts);

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 1],
      ['Onions', 1],
      ['Olives', 2],
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

    var options = {title:'How Much Pizza Sarah Ate Last Night',
                   width:400,
                   height:300};

    // Instantiate and draw the chart for Sarah's pizza.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div' + i));
    chart.draw(data, options);
  }
}

推荐答案

setOnLoadCallback 每次加载页面只应调用一次

setOnLoadCallback should only be called once per page load

一旦触发，您可以根据需要绘制任意数量的图表

once it fires, you can draw as many charts as needed

您还可以在 load 语句中包含 callback

you can also include the callback in the load statement

请参阅以下工作片段...

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 1],
      ['Onions', 1],
      ['Olives', 2],
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);
    var options = {
      title:'How Much Pizza Sarah Ate Last Night',
      width:400,
      height:300
    };

    for (var i = 0; i < 6; i++) {
      var container = document.getElementById('draw-charts').appendChild(document.createElement('div'));
      var chart = new google.visualization.PieChart(container);
      chart.draw(data, options);
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<ul id="draw-charts"></ul>

这篇关于在for循环中绘制多个谷歌图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！