Highcharts JS-将第三个变量添加到两个系列的工具提示中

Question

我已经想出如何使用高图表制作图表，其中有三个变量 - 一个在X轴上，一个在Y轴上，一个在工具提示上。执行此操作的方法是将以下内容添加到工具提示中：

tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData.find(row => row.timestamp === this.point.x)
      return pointData.somethingElse
    }
  }

请参阅此小提琴，了解完整代码：https://jsfiddle.net/m9e6thwn/

我只想做同样的事情，但有两个系列而不是一个系列。我无法让它发挥作用。我试过这个：

tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData1.find(row => row.timestamp === this.point.x)
      return pointData.somethingElse
      const pointData2 = chartData2.find(row => row.timestamp === this.point.x)
      return pointData2.somethingElse
    }
  }

这是上面的小提琴：https://jsfiddle.net/hdeg9x02/正如你所看到的，第三个变量只出现在两个系列中的一个上。我错了什么？

Answer 1

现在使用格式化板的方式存在一些问题。首先，你不能在同一个函数中有两个returns而没有任何if子句。这意味着只会使用第一个return。

无论如何，我建议您为代码做一些改进。

将每个点的额外信息添加到highcharts，这使得通过highcharts访问此信息变得更加容易。例如。在工具提示中。您可以像这样设置数据：

chartData1.map(function(row) {
  return {
    x: row.timestamp, 
    y: row.value, 
    somethingElse: row.somethingElse
  }
})

如果你这样做，那么为每个系列返回正确的工具提示是一个简单的事情：

tooltip: {
  formatter () {
    // this.point.x is the timestamp in my original chartData array
    return this.point.somethingElse
  }
}

使用JSFiddle示例：https://jsfiddle.net/ewolden/dq7L64jg/6/

如果您想在工具提示中获得更多信息，那么您可以这样做：

tooltip: {
  formatter () {
    // this.point.x is the timestamp in my original chartData array
    return this.point.somethingElse + ", time: " + str(this.x) + ", value: " + str(this.y)
  }
}

此外，您需要确保对xAxis元素（即时间戳）进行排序。这是highcharts正常运行的要求。实际上，您的示例是报告

Highcharts错误＃15：www.highcharts.com/errors/15

在控制台中，因为chartData2的顺序相反。这个例子看起来没问题，但更复杂的例子可能会导致图表看起来不像你期望的那样。

对于这个例子，使用反向很容易：data: chartData2.reverse().map(function(row) {return {x: row.timestamp, y: row.value, somethingElse: row.somethingElse}})

使用JSFiddle示例：https://jsfiddle.net/ewolden/dq7L64jg/7/