javascript - 在 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(抱歉我的俄语评论，如果您需要，我可以翻译它们): https://jsfiddle.net/95vdgtx3/3/

您还可以看到数组填充的问题，当按钮“BUILD CHART”被按下多次(一次 - 如果我们只计算 block 的显示，而不计算隐藏) - 值附加到数组中，不要知道我该如何解决它。

这是更新后的代码，您可以在其中看到我想要达到的目标: 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”

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

如果我需要提供更多信息 - 请将其写入评论。

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 中)中被人类读取。并且您可以添加其他信息，例如可以在工具提示中弹出。

注意事项

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

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

工作 JSFiddle 示例(悬停时显示 Material 类型): https://jsfiddle.net/ewolden/nxdv2wc8/5/