"Стопы" в колонке полярных диаграмм Highcharts?

Question

Мы хотим достичь того же, что и «стопы» (например, в твердом манометре), где мы можем определить значения от 0 до 5, является красным, 6 и 7 - желтым, а 8 - зеленым для каждого столбца на полярной диаграмме Highcharts. Но остановки, которые мы пробовали, показывают градиент для всего столбца независимо от значения. Невозможно определить цвета для каждого столбца на основе определенного значения.

Только вариант, который я вижу до сих пор, заключается в том, чтобы установить цвет на основе данных напрямую. Пример здесь: http://jsfiddle.net/buzLywrx/3/ То есть:

data: [{ y: 8, color: 'green'}, { y: 7, color: 'green'}, { y: 6, color: 'yellow'}, { y: 5, color: 'yellow'}, { y: 4, color: 'red'}, { y: 3, color: 'green'}, { y: 2, color: 'red'}, { y: 1, color: 'red'}], 

Мы отображая среднее, так что данные могут быть фактически любое число (с двумя знаками после запятой) между 0-100.

Каков наилучший вариант для достижения цвета колонок на основе диапазона значений?

Answer 1

Вы можете выполнять итерацию по каждой точке в серии и обновлять цвет по условию.

var color; 
    $.each(chart.series[0].data, function(i, data){ 
     if(data.y<4) { 
      color = 'red'; 
     } else if((data.y>4) && (data.y <6)) { 
       color = 'yellow'; 
     } else if(data.y > 6) { 
       color = 'orange'; 
     } 

     data.update({ 
       color: color 
     }); 
    }); 

Пример: http://jsfiddle.net/buzLywrx/4/