我正在尝试从表单字段导入值,将其分配给变量,然后将其传递给google.visualization.arrayToDataTable。
但是在两种情况下,即使将type:'number'赋值为in this answer,我总是会遇到某种错误:
案例1:
<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
var points = document.forms.myForm.tot_btc.value;
var data = google.visualization.arrayToDataTable([
['Name', {label: 'Donuts eaten', type: 'number'}],
//['Name', 'Donuts eaten'],
['Michael' , points],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
我收到这种错误:
您可以看到该值已确认,但未绘制图表:它为空白。
案例2:
<form name="myForm">
<input type="number" name="tot_btc" id="tot_btc" value="250">
var data = google.visualization.arrayToDataTable([
//['Name', {label: 'Donuts eaten', type: 'number'}],
['Name', 'Donuts eaten'],
['Michael' , points],
['Elisa', 7],
['Robert', 3],
['John', 2],
['Jessica', 6],
['Aaron', 1],
['Margareth', 8]
]);
我删除了type:'number'分配,并且甚至都无法识别该数字。
案例3:
现在,看看这个:
BUT如果我从变量中获取数字并执行任何简单的数学运算,瞧!即使不强制type:'number'识别:
,也可以识别数字并绘制图表。有人可以解释吗?
感谢
尽管您已将<input>
设置为类型编号,value
属性将始终返回一个字符串,在这里...
var points = document.forms.myForm.tot_btc.value;
从MDN - HTMLInputElement - Properties,您可以看到属性类型=字符串...
[
value
string
:返回/设置控件的当前值。
必须转换为实际数字,在将值提供给arrayToDataTable
之前>
这就是为什么对变量执行数学运算使其起作用。
更正,将值解析为数字,使用parseInt
或parseFloat
...
var points = parseFloat(document.forms.myForm.tot_btc.value);
请参阅以下工作片段...
google.charts.load('current', {'packages':['corechart', 'controls']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var dashboard = new google.visualization.Dashboard( document.getElementById('programmatic_dashboard_div')); // We omit "var" so that programmaticSlider is visible to changeRange. var programmaticSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'programmatic_control_div', 'options': { 'filterColumnLabel': 'Donuts eaten', 'ui': {'labelStacking': 'vertical'} } }); // var points = document.forms["myForm"]["points"].value; var points = parseFloat(document.forms.myForm.tot_btc.value); var cazzo = 81; var programmaticChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'programmatic_chart_div', 'options': { 'width': 300, 'height': 300, 'legend': 'none', 'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 'pieSliceText': 'value' } }); var data = google.visualization.arrayToDataTable([ // ['Name', {label: 'Donuts eaten', type: 'number'}], ['Name', 'Donuts eaten'], ['Michael' , points], ['Elisa', 7], ['Robert', 3], ['John', 2], ['Jessica', 6], ['Aaron', 1], ['Margareth', 8] ]); dashboard.bind(programmaticSlider, programmaticChart); dashboard.draw(data); changeRange = function() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); }; changeOptions = function() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); }; }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="programmatic_dashboard_div" style="border: 1px solid #ccc"> <table class="columns"> <tr> <td> <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div> <form name="myForm"> <input type="number" name="tot_btc" id="tot_btc" value="2"> <input type="range" onmousedown="return showInput()" onmouseup="return showInput()" name="points" min="0" max="10"> </form> <div> <button style="margin: 1em 1em 1em 2em" onclick="changeRange();"> Select range [2, 5] </button><br /> <button style="margin: 1em 1em 1em 2em" onclick="changeOptions();"> Make the pie chart 3D </button> </div> <script type="text/javascript"> function changeRange() { programmaticSlider.setState({'lowValue': 2, 'highValue': 5}); programmaticSlider.draw(); } function changeOptions() { programmaticChart.setOption('is3D', true); programmaticChart.draw(); } </script> </td> <td> <div id="programmatic_chart_div"></div> </td> </tr> </table> </div>