[英]Google visualisation API - Multiple charts based on Selection
我对Google Visualization Charts API还是很陌生。 我试图根据下拉选择显示不同的图表。 如果要添加其他绘图功能,则无法显示图表。 请在下面尝试的小提琴中查找。
http://jsfiddle.net/meetravi/PFa5h/5/
JS代码:
$(document).ready(function(){
var selectedVal = "";
$('#dashboard-chart-type').change(function(){
selectedVal = $(this).val();
alert(selectedVal);
switch(selectedVal) {
case "average":
$('#visualization').empty();
init();
break;
case "total_install":
debugger;
$('#visualization').empty();
init();
break;
case "total_uninstall":
debugger;
$('#visualization').empty();
init();
break;
default:
$('#visualization').empty();
init();
break;
}
});
if(selectedVal==""){
init();
}
});
经过长期的奋斗,使多个图表基于选择工作。 问题是要加载多个图表,您需要通过回调来调用绘图可视化功能。 我从Google网上论坛中找到了有用的信息。
然后我添加了一些函数init()
, init2()
... etc来加载不同的图表。 这里需要注意的一件事是在init()
方法中调用drawvisualisation()
,仅应使用google.setOnLoadCallback(drawVisualization())进行调用; 而不是调用google.setOnLoadCallback(drawVisualization); 如Google操场示例中所述。
function init(){
google.setOnLoadCallback(drawVisualization());
}
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003', 1336060, 400361, 1001582, 997974],
['2004', 1538156, 366849, 1119450, 941795],
['2005', 1576579, 440514, 993360, 930593],
['2006', 1600652, 434552, 1004163, 897127],
['2007', 1968113, 393032, 979198, 1080887],
['2008', 1901067, 517206, 916965, 1056036]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
当我尝试使用代码google.setOnLoadCallback(drawVisualization)时,未发生调用,该代码通过不显示破坏了我的图表。
这是我根据选择工作的小提琴。 http://jsfiddle.net/meetravi/PFa5h/6/
在上面的小提琴中,我加载了不同类型的图表,例如折线图,列图,堆积图等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.