如何为折线图中的每个数据点传递自定义工具提示：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

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

1. 接下来，当点包含想要的值时，我对您的格式化程序回调进行了一些更改。

   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