在JavaScript中使用listbox显示/隐藏google折线图？
我用谷歌API画了一张折线图。但是，我想在JavaScript中使用listbox来显示/隐藏多折线图函数。图表将仅显示所选的线条。这是我的代码，但它不起作用。能帮我查一下吗？非常感谢在JavaScript中使用listbox显示/隐藏google折线图？,javascript,listbox,Javascript,Listbox,我用谷歌API画了一张折线图。但是，我想在JavaScript中使用listbox来显示/隐藏多折线图函数。图表将仅显示所选的线条。这是我的代码，但它不起作用。能帮我查一下吗？非常感谢 <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("v
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init(){
var rowData1 = [['Year', 'Sales']
['2003', 100.00],
['2004', 90.29],
['2005', 241.03],
['2006', 134.61],
['2007', 151.06],
['2008', 133.96],
['2009', 103.20,],
['2010', 110.00],
['2011', 115.53],
['2012', 242.44],];
var rowData2 = [['Year', 'Marketing'],
['2003', 100.00],
['2004', 94.22],
['2005', 81.85],
['2006', 108.01],
['2007', 88.44],
['2008', 88.07],
['2009', 108.40],
['2010', 149.01],
['2011', 156.29],
['2012', 130.15],];
var rowData3 = [['Year', 'Expenses'],
['2003', 100.00],
['2004', 194.22],
['2005', 41.85],
['2006', 128.01],
['2007', 98.44],
['2008', 128.07],
['2009', 148.40],
['2010', 139.01],
['2011', 196.29],
['2012', 230.15],];
//var data = [];
//data[0] = google.visualization.arrayToDataTable(rowData1);
//data[1] = google.visualization.arrayToDataTable(rowData2);
//data[2] = google.visualization.arrayToDataTable(rowData3);
var options = {
width: 700,
height: 400,
vAxis: {title: "Amount"},
hAxis: {title: "Year"},
animation:{
duration: 1000,
easing: 'out'
},
};
}
function drawMultiChart(){
var listBox=document.getElementById("selectMultiple");
var count=0;
var itemToDraw=Array();
itemToDraw(0) = google.visualization.arrayToDataTable(rowData1);
itemToDraw(1) = google.visualization.arrayToDataTable(rowData2);
itemToDraw(2) = google.visualization.arrayToDataTable(rowData3);
for (var i=0;i<listBox.options.length;i++){
if (listBox.options[i].selected==true){
itemToDraw.push(listBox.options[i].value);
}
}
for (var j=0;j<itemToDraw.length;j++){
count+=drawOneByOne(listBox,itemToDraw[j]);
}
}
function drawOneByOne(listBox,itamToDraw){
var drawed=0;
for(var k=0;k<listBox.options.length;k++){
if(listBox.options[k].value==itemToDraw){
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
view = new google.visualization.DataView(data);
chart.draw(data, options);
drawed =1;
break;
}
}
return drawed;
}
</script>
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（init）；
函数init（）{
var rowData1=['年'，'销售额']
['2003', 100.00],
['2004', 90.29],
['2005', 241.03],
['2006', 134.61],
['2007', 151.06],
['2008', 133.96],
['2009', 103.20,],
['2010', 110.00],
['2011', 115.53],
['2012', 242.44],];
var rowData2=[['年'，'营销']，
['2003', 100.00],
['2004', 94.22],
['2005', 81.85],
['2006', 108.01],
['2007', 88.44],
['2008', 88.07],
['2009', 108.40],
['2010', 149.01],
['2011', 156.29],
['2012', 130.15],];
var rowData3=[['年'，'费用']，
['2003', 100.00],
['2004', 194.22],
['2005', 41.85],
['2006', 128.01],
['2007', 98.44],
['2008', 128.07],
['2009', 148.40],
['2010', 139.01],
['2011', 196.29],
['2012', 230.15],];
//var数据=[]；
//数据[0]=google.visualization.arrayToDataTable（rowData1）；
//数据[1]=google.visualization.arrayToDataTable（rowData2）；
//数据[2]=google.visualization.arrayToDataTable（rowData3）；
变量选项={
宽度：700，
身高：400，
vAxis:{title:“Amount”}，
哈克斯：{标题：“年”}，
动画：{
持续时间：1000，
放松：“退出”
},
};
}
函数drawMultiChart（）{
var listBox=document.getElementById（“selectMultiple”）；
var计数=0；
var itemToDraw=Array（）；
itemToDraw（0）=google.visualization.arrayToDataTable（rowData1）；
itemToDraw（1）=google.visualization.arrayToDataTable（rowData2）；
itemToDraw（2）=google.visualization.arrayToDataTable（rowData3）；
对于（var i=0；i您在drawOneByOne函数arg中有一个拼写错误。我建议检查浏览器中的控制台所说的内容并首先修复这些错误。我确实检查了拼写错误。它仍然不起作用。我正在使用Dreamwaver进行编码，它没有显示任何错误。但是我运行了代码，图表没有出现。
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<table border="0">
<tr>
<td align="right">Select One Industry</td>
<td align="left">
<select name="selectMultiple" size="10" multiple="multiple" id="selectMultiple">
<option value="Sales">Sales</option>
<option value="Marketing">Marketing</option>
<option value="Expenses">Expenses</option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><input name="submitBtn" type="button" id="submitBtn" value="Submit" onclick="javaScript:drawMultiChart();" /></td>
</tr>
</table>