我试图将一个变量传递到谷歌图表中，但是当我这样做时，图表停止显示，我的目标是每次我在输入字段中输入不同的数字时图表都会改变，但我只是没有得到现在在哪里。这就是我所拥有的，有人可以就我做错的事情提供一些指导吗？
Javascript
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function numbers(){
var work_field = document.forms['work_form']['work_n_field'].value;
var work_div = document.getElementById('number-work');
var numberschart = work_div.innerHTML = work_field;
return false;
};
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
//Right here is where I pass my variable into the chart
data.setValue(0, 1, numberschart);
//And I leave the rest here until I define more input field.
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title:"Mortgage Rates",
colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
});
}
google.setOnLoadCallback(drawVisualization);
</script>
HTML
<div id="visualization" style="width: 400px; height: 300px;"></div>
<form name="work_form" onsubmit="return numbers()">
<label id="n-work-label">Work</label><input name="work_n_field"/>
<button name="submit" id="submit" value="submit" onclick="numbers()">Submit</button>
</form>
<div id="number-work"></div>
</div>
非常感谢任何帮助，谢谢
我也将它添加到 js fiddle 中，但是当将图表添加到资源中时，它似乎没有检测到它。 http://jsfiddle.net/pkCCa/
最佳答案
这对我有用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var numberschart = 10; //<- Initial value
google.load('visualization', '1', {packages: ['corechart']});
function numbers(){
var work_field = document.forms['work_form']['work_n_field'].value;
var work_div = document.getElementById('number-work');
numberschart = work_div.innerHTML = work_field;
drawVisualization();
return false;
};
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
//data.setValue(0, 1, 11);
data.setValue(0, 1, parseInt(numberschart));//<- The value you get from input field is a string, Google API will throw an error
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {
title:"Mortgage Rates",
colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
animation:{
duration:1000,
easing: 'out',
},
vAxis: {
minValue:0,
maxValue:1000
},
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 400px; height: 300px;"></div>
<form name="work_form" onsubmit="return false">
<label id="n-work-label">Work</label><input name="work_n_field"/>
<button name="submit" id="submit" value="submit" onclick="numbers();return false;">Submit</button>
</form>
<div id="number-work"></div>
</body>
</html>
关于javascript - 将变量传递给 Google 饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10116228/