javascript - 在 Highchart 中解析数据
问题描述
我正在尝试将我的数据解析为 Highchart。我已经在这里阅读了一些关于此的文章,但没有找到解决我的问题的方法。
我有来自数据库的数据的 HTML 表。当我点击行时,他们正在“点击”类,所以我有
<td class="clicked">
并且这一行写入一个数组,如:
var rows = ["1", "X5CrNi18", "0", "55", "0", "Type1"];
然后我将它划分为两个数组,例如:
var textArr = ["X5CrNi18"]; // I am using rows[1][1] for creating textArr
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]]; // this values are Num 2 and Num3 from the table
现在的问题是:如何为不同的 "Name" 创建不同的数组?(参见 jsfiddle 中的表格)
示例: 我所做的:单击表中的所有四行。
是)我有的:
var textArr = ["X5CrNi18"];
var numArr = [[0, 0],[100, 0.5],[0, 0], [300, 0.85]];
我想要并试图拥有的:
var textArr1 = ["X5CrNi18"];
var textArr2 = ["EN31"];
var numArr = [[0, 0],[100, 0.5]];
var numArr2 = [[0, 0], [300, 0.85]];
然后我想在我的图表中建立系列计数,它等于这个数组的计数。
我已将我的代码复制到 jsfiddle(对不起我的俄语评论,如果需要,我可以翻译它们): https ://jsfiddle.net/95vdgtx3/3/
您还可以看到数组填充的问题,当按钮“BUILD CHART”被按下超过一次时(一次 - 如果我们只计算块的显示,而不计算隐藏) - 值附加到数组中,不知道我是如何可以修复它。
这是更新的代码,您可以在其中看到我想要达到的内容: https ://jsfiddle.net/Le28pfhw/ - 您无需选择行,只需单击按钮 - 数据已手动添加到系列中。
这是此刻的所有表格:
№ Grade t QPa С Type
1 X5CrNi18 0 55 0 Steel
2 X5CrNi18 100 55 0.5 Steel
3 X5CrNi18 200 55 0.68 Steel
4 X5CrNi18 300 55 0.85 Steel
5 S355J2Q +Z35 0 20 0 Steel
6 S355J2Q +Z35 100 20 0.5 Steel
7 S355J2Q +Z35 200 20 0.68 Steel
8 S355J2Q +Z35 300 20 0.85 Steel
1 42CrMo4 0 55 0 Alloy
2 42CrMo4 100 55 0.5 Alloy
3 42CrMo4 200 55 0.68 Alloy
4 42CrMo4 300 55 0.85 Alloy
5 EN31 0 20 0 Alloy
6 EN31 100 20 0.5 Alloy
7 EN31 200 20 0.68 Alloy
8 EN31 300 20 0.85 Alloy
正如我所说,表取决于数据库。如果数据库会增长,表也会增长。
所以,从这张表中,我最多可以得到 4 个系列:
1) 对于“X5CrNi18”
2) 对于“S355J2Q +Z35”
3) 对于“42CrMo4”
4) 对于“EN31”
在每个系列中来自具有相同“等级”的两行的最小数据。
如果我应该提供更多信息 - 请在评论中写下它。
解决方案
有很多方法可以实现你所追求的。这是其中之一:
不要将两个单独的数组解析为需要组合的新数组,而是使用对象。
首先,我们创建一个包含所有数组字段的字符串值的数组:
rowsText = Array.from(
document.getElementsByClassName('clickedRow'))
.map(row => Array.from(row.getElementsByTagName('TD'))
.map(cell => cell.innerHTML)
)
我们使用它来创建一个包含已完成系列信息的对象:
var finished_series = []
rowsText.forEach((arr) => {
var existing_id = -1 //we must keep track of this to check if we are adding to a series or creating a new series
finished_series.forEach((obj, index) => { //search through what we have already built
if (arr[1] == obj.name) {
existing_id = index;
return true;
}
});
if (existing_id == -1) { //if new series
finished_series.push({
name: arr[1],
data: [{
x: parseInt(arr[2]),
y: parseFloat(arr[4])
}]
})
} else { //if already existing:
finished_series[existing_id].data.push({
x: parseInt(arr[2]),
y: parseFloat(arr[4])
})
}
});
这使您可以在这样的图表中使用完成的系列定义;
Highcharts.chart('container', {
...
series: finished_series
}
使用对象的优点是它很容易从原始值(例如在 console.log 中)中被人类读取。并且您可以添加其他信息,例如,可以在工具提示中弹出。
有几点需要注意
- 小提琴中的 HTML 格式不正确,表格缺少
>
and</table>
。 - 如果您打算让用户更改选定的行,则需要更新 highchart 实例,或者清除它并重建它。就像现在一样,当您尝试单击不同的行并构建两次时它会中断,因为那里已经有信息。
工作 JSFiddle 示例: https ://jsfiddle.net/ewolden/nxdv2wc8/3/
工作 JSFiddle 示例(在悬停时显示材料类型): https ://jsfiddle.net/ewolden/nxdv2wc8/5/