Google图表 - 使用可变参数绘制图表

时间:2017-09-20 05:16:03

标签: javascript charts google-visualization

我试图使用谷歌图表创建一个图表,并将一些参数传递给该函数。我正在使用这些参数来填充数据。但它没有用。是否有可能使用参数创建该函数,因为我不知道google.charts.setOnCallback()方法中发生了什么?

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

function drawChart(scoreForEachSkill, skillList) {

var data = new google.visualization.DataTable();
data.addColumn('string','Skill');
data.addColumn('number','Score');
for(var i=0;i< scoreForEachSkill.length;i++)
{
    data.addRow(skillList[i],scoreForEachSkill[i]);
}

var options = {'title':'Skills', 'width':610, 'height':390};
var chart = new 
google.visualization.PieChart(document.getElementById('pieChart'));
chart.draw(data, options);
}

html和css部分

<div id="pieChart" style="margin-left:-10px;margin-right:-10px;"></div>

1 个答案:

答案 0 :(得分:1)

负载回调不接受任何参数,
要处理,只需在函数之间使用 ...

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

google.charts.setOnLoadCallback(function () {
  drawChart(score, skill);
});

回调也可以直接放在load语句中......

google.charts.load('current', {
  callback: function () {
    drawChart(score, skill);
  },
  packages: ['corechart']
});

注意:每页加载只需要调用一次回调,
不是每次你想绘制图表,
所以你可以做这样的事......

google.charts.load('current', {
  callback: function () {
    drawChart(score1, skill1);
    drawChart(score2, skill2);
    drawChart(score3, skill3);
  },
  packages: ['corechart']
});