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

现在的问题：如何为不同的“名称”创建不同的数组？（请参见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”

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

如果我应该提供更多信息，请在评论中写上。

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/

在Highchart中解析数据

1 个答案: