Highcharts 直方图中单个条形的自定义颜色和工具提示

我正在尝试使用 Highcharts 直方图绘制时间序列数据,并且希望有某种方法来突出显示包含最新数据点的条形图(它将是数组中的最后一个元素),并且还具有相同的自定义工具提示。

假设我正在绘制一个城市一年内的平均每日温度 - 我将如何突出显示包含最新温度的条形图并提供指示相同温度的工具提示。

可以说,在这个3Highcharts 示例中,数组中的最后一个data是最新温度,我想强调一下,并为具有该值的条形图提供自定义工具提示。

这里已经讨论了类似的内容,但没有讨论突出显示相关栏。


胡子哥哥
浏览 107回答 1
1回答

慕虎7371278

您可以更新事件中的最后一个点load并添加一个标志以在工具提示的格式化程序函数中区分它:&nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; events: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var histogramSeries = this.series[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastPoint = histogramSeries.points[histogramSeries.points.length - 1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastPoint.update({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'red'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastPoint.isLast = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; tooltip: {&nbsp; &nbsp; &nbsp; &nbsp; formatter: function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.point.isLast) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '<b>Last point result: </b> ' + this.y;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }现场演示:&nbsp;https://jsfiddle.net/BlackLabel/cefy419v/API参考:https://api.highcharts.com/highcharts/tooltip.formatterhttps://api.highcharts.com/class-reference/Highcharts.Point#update
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript