javascript - 在 switch JS Google Chart 中使用输入值
问题描述
从我上一个问题Make 3D array in Javascript 开始,我尝试了另一种解决问题的方法。主要问题是从用户那里获取值,然后选择正确的二维数组,通过输入的日期值更改空值并将其显示在图表上。
我工作的解决方案是选择正确的带开关的二维数组:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript" src = "prototype.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback();
function fixArray(){
var array_0 = [['Day', 'research', 'Weight'], ['32', 1898, null], ['33', 2432, null], ['34', 2533, null], ['35', 2267, null],
['36', 2649, null], ['37', 3018, null], ['38', 3264, null], ['39', 3460, null],
['40', 3561, null], ['41', 3706, null], ['42', 3576 , null], ['43', 3465, null]];
var array_1 = [['Day', 'research', 'Weight'], ['32', 1405, null], ['33', 1779, null], ['34', 2158, null], ['35', 2272, null],
['36', 2493, null], ['37', 2783, null], ['38', 2984, null], ['39', 3185, null],
['40', 3310, null], ['41', 3426, null], ['42', 3531, null], ['43', 3784, null]];
.
.
.
var array_10 = [['Day', 'research', 'Weight'], ['32', 2605 ,null], ['33', 3402, null], ['34', 3500, null], ['35', 3705, null],
['36', 3810, null], ['37', 3856, null], ['38', 3955, null], ['39', 4120, null],
['40', 4260, null], ['41', 4100, null], ['42', 4000 ,null], ['43', 3900, null]];
var fixed = new Array(12); // defining empty 2D array to the fixed array that will be show
for (var i = 0; i < fixed.length; i++)
fixed[i] = [];
var number = $('number').getValue();
var day = document.getElementById("day");
var weight = $('weight').getValue();
switch (number) {
case 0:
for(i=1; i<=12; i++){
if(array_0[i][0] == day)
array_0[i][2] = weight;
}
fixed = array_0;
break;
case 1:
for(i=1; i<=12; i++){
if(array_1[i][0] == day)
array_1[i][2] = weight;
}
fixed = array_1;
break;
.
.
.
case 10:
for(i=1; i<=12; i++){
if(array_10[i][0] == day)
array_10[i][2] = weight;
}
fixed = array_10;
break;
default:
alert("Not Enough Data");
break;
}
drawVisualization(fixed);
}
function drawVisualization(fixed) {
var data = google.visualization.arrayToDataTable(Array.from(fixed));
var options = {
title : 'Results',
vAxis: {title: 'Weight'},
hAxis: {title: 'Day'},
seriesType: 'line',
series: {1: {type: 'scatter'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
当我尝试运行该页面时,无论我输入的数值是什么,浏览器都会向我显示默认警报。
我的html代码:
<form onsubmit="fixArray()">
<table>
<tr>
<td>Number:</td>
<td><input id="number" name="number" type="number"></td>
</tr>
<tr>
<td>Day:</td>
<td><input id="day" name="day" type="text"></td>
</tr>
<tr>
<td>Weight:</td>
<td><input id="weight" name="weight" type="text"></td>
</tr>
<tr>
<td>
<input name="Submit1" type="submit" value="Send" style="width: 80px; height: 35px"></td>
<td>
<input name="Reset1" type="reset" value="Reset" style="width: 80px; height: 35px"></td>
</tr>
</table>
</form>
<div id="chart_div" style="width: 900px; height: 500px"></div>
我遇到的另一个问题是,当我尝试使用drawVisualization(array_0)
代码而不是修复检查时,页面再次向我显示默认情况的警报。(并且“给定轴上的所有系列必须具有相同的数据类型×”错误显示在图表 div 中)。
我究竟做错了什么?
解决方案
推荐阅读
- java - Spring mvc 表单:选择标签 - 将对对象的引用放在 VALUE
- visual-studio-code - VSCode peek 不支持语言的变量声明
- c# - 使用 LinkText 时可以使用字符串变量吗?
- java - 有没有办法在向 azure-cosmosdb 发起查询时在 Java JPA (DocumentDbRepository) 中编写自定义或本机查询?
- android - 如何以编程方式放置图像以匹配所有布局?
- plot - 如何在没有 beta0 的情况下用 y、x1 和 x2 3D 绘制损失函数?
- utf-8 - 我可以在 Thunderbird 中过滤解码的 UTF-8/Base64 吗?
- quartz.net - Quarz.NET 抛出 Unexpected end of expression
- sharepoint - 如何创建一个文件夹来存储 Sharepoint Online 中的所有列表?
- jquery - 从返回空字符串的模态输入中获取值