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

Question

我已经想出了如何使用 highcharts 制作图表，其中包含三个变量——一个在 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

您现在使用格式化程序的方式存在一些问题。一方面，如果没有任何 if 子句，您不能在同一个函数中有两个 returns。这意味着只会使用第一个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/