关于 javascript:Google Charts – Google Visualization arraytoDataTable 无法识别数值，除非”处理过”

Google Charts - Google Visualization arraytoDataTable not recognizing a numeric value unless "treated"

看看这个 JsFiddle。

我正在尝试从表单字段中导入一个值，将其分配给一个变量，然后将其传递给 google.visualization.arrayToDataTable。

但在这两种情况下，即使在这个答案中强制类型：\\'number\\' 赋值，我总是会遇到某种错误：

案例1：

1 2	<form name="myForm"> <input type="number" name="tot_btc" id="tot_btc" value="250">

1
2
3
4
5
6
7
8
9
10
11
12
13

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]
]);

我收到这种错误：

enter

案例 2：

1 2	<form name="myForm"> <input type="number" name="tot_btc" id="tot_btc" value="250">

1
2
3
4
5
6
7
8
9
10
11

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\\' 赋值，并且这个数字甚至没有被识别出来。

enter

1	var points = document.forms.myForm.tot_btc.value;

来自MDN - HTMLInputElement - Properties，可以看到属性type = string...

value string: Returns / Sets the current value of the control.

它必须转换为实际数字，
在向 arrayToDataTable

提供值之前

这就是为什么对变量执行数学运算会使其工作。

要更正，将值解析为数字，
使用 parseInt 或 parseFloat...

1	var points = parseFloat(document.forms.myForm.tot_btc.value);

请参阅以下工作片段...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

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();
};
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35