2016-06-14 3 views
0

私は単一の列をハイライトする必要がある既存のハイチャートを持っています。ロード時にハイチャート内のハイライトのシングルバー/カラム

これはしばらくの間行ってきたパーセンタイルグラフです。私はまだ高チャートには新しくありませんが、スタックバーとクリックイベントを扱っていますが、ここで同様の質問があります。 ...ここで

は私のサンプルです

コードを例に私には理にかなって、私は、私は何かが欠けています推測し、ここでhttps://jsfiddle.net/52t43y3k/2/

が問題である(第24回コラムを強調しようとしています)私は見た: Highlight one bar in a series in highcharts?

refのために、私のコードは、あなたがあなたのjQueryオブジェクトのオフ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'}); 

答えて

1

です、あなたの例では

明快

については

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

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

意味、あなたが呼び出すことにより(それは上記のあなたのケースのように、すでにDOM要素に添付されていますと仮定した場合)からアクセスできるようにhighcharts()は、jQueryのためのプラグインですhighcharts jQueryセレクタインスタンスをオフにします。

+0

ああ - とても簡単です - ありがとうございます。将来の参考情報のために更新された作業フィール... https://jsfiddle.net/52t43y3k/3/ – picus

関連する問題