2016-06-14 3 views
0

У меня есть существующая высокоскоростная диаграмма, на которой мне нужно выделить один столбец.Выделите Single Bar/Column в Highcharts при загрузке

Это график процентиля, который был вокруг какое-то время, но я до сих пор довольно новичок в высоких чартах, но я видел аналогичный вопрос здесь, на SO, этот вопрос, хотя и связан со сложными барами и событием клика. ..

код имеет смысл для меня в примере, но я предполагаю, что я что-то отсутствует,

Вот мой пример (пытаясь выделить 24-й столбец) https://jsfiddle.net/52t43y3k/2/

Вот вопрос Я видел: Highlight one bar in a series in 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

Вы должны получить доступ к highcharts от вашего объекта JQuery:

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 с экземпляром селектора jQuery.

+0

Ahhh - так просто - спасибо. Обновленная рабочая скрипка для будущих ссылок .... https://jsfiddle.net/52t43y3k/3/ – picus

Смежные вопросы