Question

<html>
<head> </head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<form method="post" action="#" id="formvalue" onekeyup="drawChart()"> 
<input type="number" id="x" value=2>

</form>

<script type="text/javascript" src="https://www.gstatic.com/charts
/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var ask=document.getElementById('x');

var a=90;

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work',     11],
['Eat',      2],
['Commute',  2],
['Watch TV', 2],
['Sleep',    ask]
]);

var options = {
title: 'My Daily Activities'
};

var chart = new   
google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);
}
</script>
</body>

</html>

用户给出的输入没有很好地存储在getElementById（'x'）变量ask中。请帮忙！！我想在图表的一个参数中使用它。 [ '睡眠'，问] 如果还有其他方法可以根据用户输入制作图表吗？

Answer 1

我相信您的代码有错误，这是因为它无法获取变量ask的值。对此变量的赋值应为document.getElementById('x').value，以从输入字段/框中检索值。

如果您想根据用户输入创建图表，我认为您走在正确的轨道上。您可以为每个任务小时分配输入字段，并且可以通过使用提交按钮来提交表单，该按钮调用drawChart()函数来重绘图形甚至是您用于提交表单的当前方法。

对于需要提交按钮的用户来说，这是类似的事情：

<form action="">
   Hours Worked:<br>
   <input type="number" name="work"><br>
   Hours Slept:<br>
   <input type="number" name="sleep"><br><br>
   <input type="submit" value="Submit" onClick="drawChart()">
</form>

如上所述，将使用相同的方法从输入表单中检索值。

您在console.log中可能会遇到错误，因为在页面加载之前可能没有在输入表单中定义的值。要停止此操作，请删除google.charts.setOnLoadCallback(drawChart);或执行输入值验证，以便在输入字段为空时不绘制图形，或者在输入字段为空时可以使用默认值。

有关表单验证和示例代码的更多信息，请访问here。

使用谷歌图表制作带有用户输入的图表

1 个答案: