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

您现在使用格式化程序的方式存在一些问题。首先，没有任何if子句，同一函数中不能有两个return。这意味着将仅使用第一个return。

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

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

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错误＃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/

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

1 个答案: