【发布时间】:2017-12-07 21:14:30
【问题描述】:
实际上,在使用动态数据实施时,我面临着与 Google 图表相关的问题。这里的问题当我单击一个选项卡时,必须在图表中显示特定数据。假设说单击当前日期在图表中显示以下结果
假设如果你再次按下 Current Day 字符会像这样显示
这里的图表区域在第一次单击和第二次单击后无法正常工作
`google.charts.load('current', { 'packages': ['bar'] });
$('#t1').click(function () {
google.charts.setOnLoadCallback(BarC);
function BarC() {
var jsonData = $.ajax({
type: 'GET',
url: xxxx.xxxx.xxxx,
dataType: 'json',
}).done(function (results) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'data1');
data.addColumn('number', 'data2');
data.addColumn('number', 'data3');
data.addColumn('number', 'data4');
data.addRows(results.length);
for (i = 0; i < results.length; i++) {
data.setValue(i, 0, results[i]["data1"]);
data.setValue(i, 1, parseInt(results[i]["data2"]));
data.setValue(i, 2, parseInt(results[i]["data3"]));
data.setValue(i, 3, parseInt(results[i]["data4]));
}
var options = {
backgroundColor: 'transparent',
bars: 'vertical',
chartArea: { left: 0, top: 0, width: '100%', height: '100%' }// Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
);
}
});`
【问题讨论】:
-
需要等到图表的容器可见后才能绘制图表。在这里查看答案 --> Issue with displaying Google Chart in a bootstrap tab
标签: javascript jquery css charts google-visualization