如何为折线图中的每个数据点传递自定义工具提示：Highcharts React JS

Question

我正在尝试为折线图中的每个数据点添加自定义工具提示。我试图传递给此折线图的数据格式为：

我从 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

有人可以帮我吗

Answer 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

如何为折线图中的每个数据点传递自定义工具提示：Highcharts React JS

How to pass custom tootlip for each data point in Line chart : Highcharts+ ReactJS

javascript

highcharts

reactjs

highcharts-ng

react-highcharts