Как передать пользовательский всплывающую подсказку для каждой точки данных на линейном графике: Highcharts + ReactJS - PullRequest
Новая
       52

Как передать пользовательский всплывающую подсказку для каждой точки данных на линейном графике: Highcharts + ReactJS

0 голосов
/ 09 апреля 2020

Я пытаюсь добавить пользовательскую подсказку для каждой точки данных в линейной диаграмме. Данные, которые я пытаюсь передать в этот линейный график, имеют формат:

Данные, которые я получаю от API 

[
  {
     old : "1",
     current : "2",
     oldtime : "1586217600000"
     newtime: "1583625600000"
  },
  {
     old : "2",
     current : "3",
     oldtime : "1596217600000"
     newtime: "1583625600000"
  },
  {
     old : "4",
     current : "7",
     oldtime : "1581217600000"
     newtime: "1583185600000"
  }
]

Мне удалось вывести две линейные графики для старых и текущий после преобразования их следующим образом 

[ 
  {
    "name" : "old"
    "data" : [1,2,4]
  },
  {
    "name" : "current"
    "data" : [2,3,7]
  },
]

Я могу получить всплывающую подсказку для этих линейных графиков, где она показывает старое и текущее значение для каждой точки. Теперь все, что мне нужно, это как преобразовать данные API для получения настраиваемой всплывающей подсказки, которая включает в себя старые, текущие, старые значения, значения нового времени для каждой точки данных.

Я использую следующую функцию для преобразования данных 

  createLineChart = graphData => {
    let data = [],old = [];
    graphData.forEach(elem => {
      old.push(elem.old);
      current.push(elem.current);
    });
    data.push({ name: "BASELINE", data: old });
    data.push({ name: "CURRENT", data: current });
    return data;
  };

Код песочницы: https://codesandbox.io/s/react-line-chart-n9g6o

Может ли кто-нибудь помочь мне здесь

1 Ответ

0 голосов
/ 09 апреля 2020

  1. Вам необходимо добавить эти значения - oldtime и newtime в точку в качестве дополнительного свойства объекта. Я предположил, что в вашей демонстрации эти значения являются ots и cts. 

    createLineChart = graphData => {
  let data = [],
      old = [],
      current = [];
  let res1 = this.splitAndMerge(graphData);
    res1.forEach((elem, i) => {
      old.push([i, elem.old, elem.ots]);
      current.push([i, elem.current, elem.cts]);
    });
  data.push({ name: "BASELINE", data: old, keys: ["x", "y", "ots"] });
  data.push({ name: "CURRENT", data: current, keys: ["x", "y", "cts"] });
  return data;
};

В приведенном выше коде я добавляю также функцию ключей к объекту серии, который отвечает за присвоение значений из массив правильно.

API: https://api.highcharts.com/highcharts/series.line.keys

Затем, когда точка включает в себя требуемые значения, я сделал некоторые изменения в вашем обратном вызове форматера. 

formatter: function() {
  let self = this;
  let formattedString = "<small></small><table>";
  self.points.forEach(elem => {
    formattedString +=
      '<tr><td style="color: {series.color}">' +
       elem.series.name +
       ": </td>";
    formattedString +=
      '<td style="text-align: right"><b>' + elem.y + "</b></td>";
    if (elem.point.cts) {
      formattedString +=
        '<td style="text-align: right">cts: <b>' +
        elem.point.cts +
        "</b></td></tr>";
    } else {
      formattedString +=
        '<td style="text-align: right">cts: <b>' +
        elem.point.ots +
        "</b></td></tr>";
    }
  });
 return formattedString;
}

И окончательный результат: https://stackblitz.com/edit/react-qjsfbl?file=LineChart.js

...