我已经弄清楚了如何使用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/
