Javascript 谷歌可视化API-基于选择的多个图表
我是谷歌可视化图表API的新手。我试图根据下拉选择显示不同的图表。如果我正在添加另一个绘图函数,则不会显示图表。请在下面找到我的小提琴,我已经试过了 JS代码:Javascript 谷歌可视化API-基于选择的多个图表,javascript,jquery,google-visualization,Javascript,Jquery,Google Visualization,我是谷歌可视化图表API的新手。我试图根据下拉选择显示不同的图表。如果我正在添加另一个绘图函数,则不会显示图表。请在下面找到我的小提琴,我已经试过了 JS代码: $(document).ready(function(){ var selectedVal = ""; $('#dashboard-chart-type').change(function(){ selectedVal = $(this).val(); alert(selectedVal);
$(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();
}
});
经过长时间的努力,多个图表在选择的基础上工作。问题是要加载多个图表,您需要通过回调调用draw Visualization函数。我从谷歌群组中找到了这些有用的信息 然后我添加了一些函数来加载不同的图表。这里我们需要注意的一点是调用
drawVisualization()
insideinit()
方法,应该只使用google.setOnLoadCallback(drawVisualization())调用它而不是调用google.setOnLoadCallback(drawVisualization)如谷歌游乐场示例中所述
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)时,调用没有发生,该代码没有显示,破坏了我的图形
这是我的小提琴,它是根据选择来工作的。
在上面的提琴中,我加载了不同类型的图表,如直线、柱、堆叠等