Markieren Sie einzelne Balken/Spalten in Highcharts beim Laden

Question

Ich habe ein bestehendes Highchart, auf dem ich eine einzelne Spalte markieren muss.

Es ist ein Perzentil-Grafik, die schon seit einiger Zeit, ich bin immer noch ziemlich neu in High-Charts, aber ich habe eine ähnliche Frage hier auf SO, diese Frage, obwohl befasst sich mit gestapelten Bars und einem Klick-Ereignis. ..

der Code Sinn für mich im Beispiel macht, aber ich denke, ich bin etwas fehlt,

Hier ist meine Probe (Versuch, die 24. Spalte zu markieren) https://jsfiddle.net/52t43y3k/2/

Hier ist die Frage Ich sah: Highlight one bar in a series in highcharts?

für ref, mein Code ist

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

Sie die highcharts von Ihrem jquery Objekt zugreifen müssen:

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

Aus Gründen der Klarheit

In Ihrem Beispiel die folgenden ist wahr:

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

Von der highcharts Quelle:

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

Bedeutung ist highcharts() ein Plugin für jQuery, so dass Sie darauf zugreifen können (vorausgesetzt, es bereits mit dem DOM-Elemente angebracht worden ist, wie in Ihrem Fall oben) durch den Aufruf highcharts aus einer jQuery-Selektorinstanz.