为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

胡子哥哥 2023-11-02 21:17:48
我正在尝试使用 Highcharts 直方图绘制时间序列数据,并且希望有某种方法来突出显示包含最新数据点的条形图(它将是数组中的最后一个元素),并且还具有相同的自定义工具提示。假设我正在绘制一个城市一年内的平均每日温度 - 我将如何突出显示包含最新温度的条形图并提供指示相同温度的工具提示。可以说,在这个3Highcharts 示例中,数组中的最后一个data是最新温度,我想强调一下,并为具有该值的条形图提供自定义工具提示。这里已经讨论了类似的内容,但没有讨论突出显示相关栏。
查看完整描述

1 回答

?
慕虎7371278

TA贡献1802条经验 获得超4个赞

您可以更新事件中的最后一个点load并添加一个标志以在工具提示的格式化程序函数中区分它:


    chart: {

        events: {

            load: function() {

                var histogramSeries = this.series[0],

                    lastPoint = histogramSeries.points[histogramSeries.points.length - 1];


                lastPoint.update({

                    color: 'red'

                });

                lastPoint.isLast = true;

            }

        }

    },


    tooltip: {

        formatter: function() {

            if (this.point.isLast) {

                return '<b>Last point result: </b> ' + this.y;

            }


            return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';


        }

    }

现场演示: https://jsfiddle.net/BlackLabel/cefy419v/

API参考:

https://api.highcharts.com/highcharts/tooltip.formatter

https://api.highcharts.com/class-reference/Highcharts.Point#update


查看完整回答
反对 回复 2023-11-02
  • 1 回答
  • 0 关注
  • 64 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信