ハイチャートのウェッジ値に基づいて円グラフのウェッジカラーを設定するにはどうすればよいですか？

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