在 Highchart 中解析数据

Question

我正在尝试将我的数据解析为 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（对不起，我的俄罗斯 cmets，如果您需要，我可以翻译它们）： 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”

在每个系列中来自具有相同“等级”的两行的最小数据。

如果我应该提供更多信息 - 请把它写到 cmets 中。

Answer 1

有很多方法可以实现您的目标。这是其中之一：

不要将两个单独的数组解析成需要组合的新数组，而是使用对象。

首先，我们创建一个包含所有数组字段的字符串值的数组：

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 格式不正确，表格缺少 > 和 </table>。
• 如果您打算让用户更改选定的行，您需要更新 highchart 实例，或者清除它并重建它。就像现在一样，当您尝试单击不同的行并构建两次时它会中断，因为那里已经有信息了。

工作 JSFiddle 示例： https://jsfiddle.net/ewolden/nxdv2wc8/3/

工作 JSFiddle 示例（在悬停时显示材料类型）： https://jsfiddle.net/ewolden/nxdv2wc8/5/