加载时在 Highcharts 中突出显示单个条形图/列

Question

我有一个现有的高图，我需要在其上突出显示单个列。

这是一个已经存在了一段时间的百分位图，我对高图表还是很陌生，但是我在这里看到了一个类似的问题，这个问题虽然涉及堆叠条形图和点击事件。 .

示例中的代码对我来说很有意义，但我想我遗漏了一些东西，

这是我的示例（试图突出显示第 24 列） https://jsfiddle.net/52t43y3k/2/

这是我看到的问题： Highlight one bar in a series in highcharts?

对于 ref，我的代码是

var col_chart = $('#section-2-chart').highcharts({
            chart: {
                type: 'column'
            },
            tooltip: { enabled: false },
            credits:false,
            title: false,
            xAxis: {
                title:{text:'PERCENTILES'},
                type: 'Percentile',
                labels: {
                    enabled:true,
                    formatter: function() {
                        return this.value*2;
                    }
                }
            },
            yAxis: {
                min: 0,
                title:{text:'Total Image Weight'}
            },
            legend: {
                enabled: false
            },
            series: [{
                data: [169,12003,38308.5,61739.7,97069,131895.5,161086.7,198758.7,219779.3,243567.7,276607.7,296931.5,327457.5,362840.3,383978,410685.5,443774,467039.5,491654,517205,544754.7,578468.3,605392.5,644214.5,693765,766953.7,806616,855380.7,894161,942282,1001179.7,1062697.7,1125773.3,1186437,1236893.7,1314379.5,1378944,1454090.3,1553065,1689346,1833150,1957396,2077851.5,2228644.7,2390102,2725365.5,3147844.3,3607372,4239281.5,5190061,9422370.8],
                tooltip: {
                    pointFormat: '<b>{point.y:f} Bytes</b>'
                }
            }]
        });

    //TRIED THIS AND series.data[24] - essentially the 24th bar should be highlighted
        col_chart.series[0].data[24].update({color:'red'});

Answer 1

您需要访问您的 jquery 对象的highcharts：

 col_chart.highcharts().series[0].data[24].update({
   color: 'red'
 });

为清楚起见

在您的示例中，以下情况属实：

console.log(col_chart instanceof jQuery); // true

来自 highcharts 来源：

/**
 * Register Highcharts as a plugin in jQuery
 */
if (win.jQuery) {
    win.jQuery.fn.highcharts = function () {
        var args = [].slice.call(arguments);

        if (this[0]) { // this[0] is the renderTo div

            // Create the chart
            if (args[0]) {
                new Highcharts[ // eslint-disable-line no-new
                    isString(args[0]) ? args.shift() : 'Chart' // Constructor defaults to Chart
                ](this[0], args[0], args[1]);
                return this;
            }

            // When called without parameters or with the return argument, return an existing chart
            return charts[attr(this[0], 'data-highcharts-chart')];
        }
    };
}

意思是，highcharts() 是 jQuery 的插件，因此您可以通过在 jQuery 选择器实例上调用 highcharts 来访问它（假设它已经附加到 dom 元素，如上例所示）。