Разбор данных в 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]];

И затем я хочу построить количество рядов в моем графике, равное количеству этих массивов.

Iскопировал мой код в jsfiddle (извините за мои русские комментарии, я могу перевести их, если вам потребуется): https://jsfiddle.net/95vdgtx3/3/

Также вы можете увидеть проблему с заполнением массивов, когда кнопка «BUILD CHART»нажал более одного раза (один - если мы будем считать только отображение блока, не считая скрытия) - значения добавляются в массивы, не знаю, как я могу fix it.

Вот обновленный код, где вы можете увидеть то, что я пытаюсь достичь: 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>.
• Если вы планируете позволить пользователям изменять выбранные строки, вам нужно либо обновить экземпляр старшей диаграммы, либо очистить его и перестроить.Как и сейчас, он ломается, когда вы пытаетесь щелкнуть по разным строкам и построить дважды, поскольку там уже есть информация.

Пример работы JSFiddle: https://jsfiddle.net/ewolden/nxdv2wc8/3/

Рабочий пример JSFiddle (который показывает тип материала при наведении) : https://jsfiddle.net/ewolden/nxdv2wc8/5/