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

查看:136
本文介绍了在for循环中绘制多个Google图表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在for循环中绘制多个Google图表,但似乎无法使其工作。我看到了一些类似的问题,但仅限于PHP。任何人都可以帮忙?这是我迄今为止所尝试的 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],
[ '西葫芦',2],
['Pepperoni',1]
]);

var options = {title:'多少披萨Sarah Ate昨晚',
宽度:400,
height:300};

//实例化并绘制萨拉披萨的图表。
var chart = new google.visualization.PieChart(document.getElementById('chart_div'+ i));
chart.draw(data,options);
}
}


解决方案

setOnLoadCallback 应该只在页面加载时调用一次



一旦触发,您可以根据需要绘制多个图表你也可以在 load 语句中加入 callback 语句 / p>

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

  google.charts.load('current',{callback:function(){var data = new google.visualization.DataTable(); data.addColumn('string','Topping'); data。 addColumn('number','Slices'); data.addRows([['蘑菇',1],['洋葱',1],['Olives',2],['Zucchini',2] Pepperoni',1]]); var options = {title:'多少比萨萨拉吃了昨晚',宽度:400,身高: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(数据,选项); }},packages:['corechart']});  

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


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 should only be called once per page load

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

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循环中绘制多个Google图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆