javascript - 如何在一次加载中加载多个谷歌图表,因为谷歌图表只允许加载一个包
问题描述
我有一个饼图,可以在我的页面上轻松呈现,但我还需要在该页面上创建一个树形图。现在树形图使用package {'packages':['treemap']}
. 由于指定只有一次调用 load function google .charts.load()
。代码看起来像这样。条形图和饼图已加载,但树形图未呈现。
$(document).ready(function () {
$("#submit").click(function () {
$("#pages").hide();
var datefrom = $('#fromdatecalendar').val()
var dateto = $('#todatecalendar').val()
var model = $("#model_name").val().toString();
var queryObject = "";
var queryObjectLen = "";
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.load('current', { 'packages': ['treemap'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "connect.jsp",
type: "POST",
data: { datetype: $('#fromdatecalendar').val(), datatocal: $('#todatecalendar').val(), model: $("#model_name").val().toString() },
success: function (datas) {
var jsonData = JSON.parse(datas);
//loadData(jsondata);
var data = new google.visualization.DataTable();
var data2 = new google.visualization.DataTable();
// assumes "word" is a string and "count" is a number
data.addColumn('string', 'CATEGORY');
data.addColumn('number', 'COUNT_CAT');
data2.addColumn('string', 'CATEGORY');
data2.addColumn('string', 'SUB_CATEGORY');
data2.addColumn('string', 'SUB_CATEGORY_2');
data2.addColumn('string', 'SUB_CATEGORY_3');
data2.addColumn('string', 'SUB_CATEGORY_4');
data2.addColumn('string', 'SUB_CATEGORY_5');
data2.addColumn('number', 'COUNT_CAT');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].CATEGORY, jsonData[i].COUNT_CAT]);
}
for (var j = 0; i < jsonData.length; i++) {
data2.addRow([jsonData[j].CATEGORY, jsonData[j].SUB_CATEGORY, jsonData[j].SUB_CATEGORY_2, jsonData[j].SUB_CATEGORY_3, jsonData[j].SUB_CATEGORY_4, jsonData[j].SUB_CATEGORY_5, jsonData[j].COUNT_CAT]);
}
//alert(data);
var piechart_options = {
title: 'Category Count',
backgroundColor: '#f5f5f5',
pieSliceText: 'value',
is3D: true
};
var piechart = new google.visualization.PieChart(document.getElementById('chart_div'));
piechart.draw(data, piechart_options);
var barchart_options = {
title: 'Category',
backgroundColor: '#f5f5f5',
legend: 'none'
};
var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
barchart.draw(data, barchart_options);
var tree = new google.visualization.TreeMap(document.getElementById('treechart_div'));
tree.draw(data2, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
var showsubcat = document.getElementById("showsub");
showsubcat.onclick = function () {
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
piechart.draw(view, piechart_options);
}
},
error: function (xhr, type) {
alert('server error occoured')
}
});
}
});
});
解决方案
你可以像这样加载多个包......
google.charts.load('current', {'packages': ['corechart', 'treemap']});