答案 0 :(得分：1)
请勿查看创建chart的位置 - ＆gt; var chart = new google.charts.Bar...
或options的定义 - ＆gt; var options = {...
建议使用switch语句来确定菜单的值
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var dataDefault = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var dataLibraryBooks = google.visualization.arrayToDataTable([
['Digit', 'Benford', 'Librarybooks'],
['1', 1000, 200],
['2', 1170, 760],
['3', 660, 100],
['4', 1030, 300],
['5', 1030, 140],
['6', 1030, 640],
['7', 1030, 240],
['8', 1030, 440],
['9', 1030, 840]
]);;
var dataSunspots = google.visualization.arrayToDataTable([
['x', 'y'],
['A', 10],
['B', 30],
['C', 50],
['D', 70],
['E', 90]
]);
var options = {
chart: {
title: 'Bar Chart'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
var menu = document.getElementById('menu');
menu.addEventListener('change', drawChart, false);
drawChart();
function drawChart() {
switch (menu.selectedIndex) {
case 1:
console.log('librarybooks');
chart.draw(dataLibraryBooks, google.charts.Bar.convertOptions(options));
break;
case 2:
console.log('Sunspots');
chart.draw(dataSunspots, google.charts.Bar.convertOptions(options));
break;
default:
console.log('default');
chart.draw(dataDefault, google.charts.Bar.convertOptions(options));
}
}
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="menu">
<option selected>livejournal</option>
<option>librarybooks</option>
<option>sunspots</option>
</select>
<div id="chart_div"></div>
答案 1 :(得分：0)
您尚未致电：google.charts.setOnLoadCallback(drawChart);。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
function drawgraph(index){
if(index==0){
document.getElementById('livejournal');
google.charts.setOnLoadCallback(drawChart('livejournal'));
}
if(index==1){
google.charts.setOnLoadCallback(drawChart('librarybooks'));
}
if(index==2){
google.charts.setOnLoadCallback(drawChart('sunspots'));
}
}
function drawChart(divId) {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById(divId));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<select id="menu" onchange=drawgraph(this.selectedIndex)>
<option>livejournal</option>
<option>librarybooks</option>
<option>sunspots</option>
</select>
<div id="livejournal" style="width: 900px; height: 500px;"></div>
<div id="librarybooks" style="width: 900px; height: 500px;"></div>
<div id="sunspots" style="width: 900px; height: 500px;"></div>
</body>
</html>