Как установить цвет клина круговой диаграммы на основе значений клина для высоких карт?

Question

Я строй круговой диаграммы в Highcharts: http://jsfiddle.net/y3j8ybrg/

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

Документация по API, похоже, не делает этого доступным. Он показывает, как можно использовать закрытие или функцию для генерации массива цветов, но не то, как можно дать этой функции доступ к значению точки.

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<div id="container" style="height: 400px"></div> 
<button id="button">Add point</button> 

JavaScript:

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: '#323f48', 
      plotBorderColor: '#323f48', 
      plotBorderWidth: 0, 
      plotShadow: false, 
      backgroundColor: '#323f48', 
      borderColor: '#323f48' 
     }, 
     title: { 
      text: 'CHART<br/><span class="white">sub-header</span>', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: -3, 
      style: { 
       fontWeight: 'bold', 
       color: 'white', 
       fontSize: '10px' 
      } 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 

       dataLabels: { 
        enabled: true, 
        distance: -510, 
        style: { 
         fontWeight: 'bold', 
         color: '#323f48' 
        } 
       }, 
       startAngle: -180, 
       endAngle: 180, 
       center: ['50%', '50%'], 
       animation: false, 
       borderColor: '#323f48', 
       borderWidth: '0px' 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'days', 
      innerSize: '90%', 
      data: [ 
       ['empty',  56.00], 
       ['days',  44.00], 
      ], 
      // I want this to be a function that returns a color depending upon the data series point value. 
      colors: (function(){return [ 
       '#59636b', 
       '#8edd65' 
      ]})(), 
     }], 
    }); 
}); 

Answer 1

Вероятно, лучше либо предварительно рассчитать цвета и создать массив данных, как {x: 'empty', y: 56.00, color: '#somecolorhex',.. или обновить цвета на нагрузке в chart.events.load вызова. Вы также можете добавить функцию getColor() в элемент данных, но вам придется повторить значение данных.

getColor = function(val) { 
    if (val >= 50) { 
     return 'red' 
    } else { 
     return 'blue' 
    } 
    } 

series: [{ 
    type: 'pie', 
    name: 'days', 
    innerSize: '90%', 
    data: [{ 
    x: 'empty', 
    y: 56.00, 
    color: getColor(56.00) 
    }, { 
    x: 'days', 
    y: 44.00, 
    color: getColor(44.00) 
    }] 
}] 

Образец jsfiddle