使用colorValue的Highcharts饼图切片颜色强度

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 上可用。

但是，您可以毫不费力地做类似的事情。使用 color 而不是 colorValue，然后调用一个函数来获取值。这是一个简单的示例，可以根据您想要的行为以各种方式进行改进：

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/

使用colorValue的Highcharts饼图切片颜色强度

Highcharts pie chart slice colour intensity using colorValue

javascript

jquery

charts

highcharts