突出显示高图上的单个条形图/列 [英] Highlight Single Bar/Column in Highcharts on load

问题描述

我有一个现有的高级图表，需要在其中突出显示一列.

I have an existing highchart on which I need to highlight a single column.

这是一个已经存在一段时间的百分位图，我对高位图还是很陌生，但是我在这里也看到了类似的问题，尽管这个问题涉及堆积的条形图和单击事件.

It is a percentile graph that has been around for a while, I am still pretty new to high charts, but I have seen a similar question here on SO, this question, though deals with stacked bars and a click event...

该示例中的代码对我来说很有意义，但是我想我缺少了一些东西，

The code makes sense to me in the example, but I guess I am missing something,

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

Here is my sample (trying to highlight the 24th column) https://jsfiddle.net/52t43y3k/2/

这是我看到的问题:在highcharts中突出显示系列中的一个条形图?

对于裁判，我的代码是

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'});

推荐答案

您需要访问jquery对象之外的 highcharts :

You need to access the highcharts off of your jquery object:

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

为清楚起见

在您的示例中，以下是正确的:

In your example, the following is true:

console.log(jQuery的col_chart实例);//是

摘自highcharts来源:

From the highcharts source:

/**
 * 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 关闭jQuery选择器实例.

Meaning, highcharts() is a plugin for jQuery, so you can access it (assuming it's been attached to the dom element already, as in your case above) by calling highcharts off a jQuery selector instance.

这篇关于突出显示高图上的单个条形图/列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！