Highcharts пирог ломтик график интенсивности цвета с помощью colorValue

Question

Я пытаюсь добиться того же, как показано здесь:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/treemap-coloraxis

За исключением круговой диаграммы вместо этого.

Я его настроить так:

$('#expenditurePie').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       backgroundColor: '#121212', 
       height: 322, 
       className: 'summary-chart-right' 
      }, 
      title: null, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        borderColor: '#000', 
        cursor: 'pointer', 
        dataLabels: false 
       } 
      }, 
      colorAxis: { 
       minColor: '#FFFFFF', 
       maxColor: '#FF0000' 
      }, 
      series: response 
     }); 

Образец данных ответа:

... 
{name: "Leisure", y: 143.55, colorValue: 3} 
... 

Он не работает и круговая диаграмма цвет их по умолчанию.

Как я могу это сделать?

Answer 1

Согласно the docs, colorValue доступен только на TreeMaps.

Однако вы можете сделать подобную вещь без особых трудностей. Вместо colorValue используйте color, а затем вызовите функцию, чтобы получить значение. Вот быстрый и грязный пример, который можно улучшить различными способами в зависимости от того, что поведение, которое вы хотите:

var getColor = function (step,stepCount) { 
    var scaledHex = Math.floor(255*step/(stepCount+1)).toString(16); 
    console.log(scaledHex); 
    return '#FF'+scaledHex+scaledHex; 
}; 

И

... 
{name: "Leisure", y: 143.55, color: getColor(1,3)} 
... 

http://jsfiddle.net/8Lnzcnx6/