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

我已经弄清楚了如何使用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/如您所见,第三个变量仅出现在两个系列之一中.我怎么了？

最佳答案

您现在使用格式化程序的方式存在一些问题.对于一个,没有任何if子句,同一函数中不能有两个返回值.这意味着将只使用第一个返回.

无论如何,我建议您对代码进行一些改进.

将每个点的额外信息添加到图表中,这使得通过图表来访问此信息变得容易得多.例如.在工具提示中.您可以这样设置数据：

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

工作JSF中间示例：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 error #15: www.highcharts.com/errors/15

在控制台中,因为chartData2的顺序相反.这个例子看起来还不错,但是更复杂的例子可能会导致图表看起来不像您期望的那样.

对于此示例,使用反向操作非常容易：data：chartData2.reverse().map(function(row){return {x：row.timestamp,y：row.value,somethingElse：row.somethingElse}})

工作的JSF中间示例：https://jsfiddle.net/ewolden/dq7L64jg/7/