如何为折线图中的每个数据点传递自定义tootlp:Highcharts+ReactJS

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;
   };
   

在上面的代码中，我还向负责正确分配数组值的series对象添加了keys功能。

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

2. 接下来，当点包括所需的值时，我对格式化程序回调进行了一些更改。

   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