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

【问题标题】：Custom color & tooltip for a single bar in Highcharts histogramHighcharts直方图中单个条的自定义颜色和工具提示
【发布时间】：2020-12-11 09:19:16
【问题描述】：

我正在尝试使用 Highcharts 直方图绘制时间序列数据，并且希望有一些方法可以突出显示包含最新数据点的条（它将是数组中的最后一个元素），并且还有一个自定义工具提示一样。

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

比方说，在 THIS Highcharts 示例中，data 数组中的最后一个 3 是最新的温度，我想突出显示，并为具有该值的条形图提供自定义工具提示。

HERE 已经讨论过类似的事情，但没有提到突出显示相关栏。

【问题讨论】：

标签： javascript charts highcharts

【解决方案1】：

您可以更新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

【讨论】：

嗨 ppotaczek。我正在查看您发布的示例，我意识到被突出显示的 bin 仅包含一个值，即 4.4。我要突出显示的是包含 data 数组中最后一个元素的 bin，恰好是 3。因此必须突出显示最高的条。如果我错了，请纠正我。
我认为数组正在排序，所以最后一点变成 4.4（恰好是数组中最大的元素）。所以..我想知道是否在将数组传递给highcharts进行绘图之前对数组进行排序并提供我想要突出显示的元素（甚至元素本身）的确切索引，这会让事情变得更容易吗？我尝试将lastPoint = histogramSeries.points[histogramSeries.points.length - 1]; 更改为lastPoint = histogramSeries.points[57];，这是元素3 第一次出现的索引位置，但它不起作用。
嗨@truthseeker99，是的，你是对的。你可以试试这样的：jsfiddle.net/BlackLabel/0oam1pes