Question

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

这是一个已经存在一段时间的百分位数图，我对高级图表仍然很陌生，但我在SO上看到了类似的问题，这个问题，虽然处理堆叠条和点击事件..

在示例中代码对我有意义，但我想我错过了一些东西，

这是我的样本（试图突出显示第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的一个插件，所以你可以通过调用highcharts来访问它（假设它已经附加到dom元素，就像上面的情况一样）一个jQuery选择器实例。

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

1 个答案: