Highcharts饼图切片颜色强度使用colorValue [英] Highcharts pie chart slice colour intensity using colorValue

问题描述

我想达到与这里所显示的相同的效果：

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

我的设置如下：

  $（'＃expensesPie'） .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} 
 ... 
  

它不工作，饼图颜色是它们的默认值。

解决方案

根据文档，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）} 
 ... 
  / pre> 
 
 
  http://jsfiddle.net/8Lnzcnx6/  
 
I am trying to achieve the same thing as seen here:

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

Except with a pie chart instead.

I have it set up like so:
 $('#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
        });
A sample of response data:
...
{name: "Leisure", y: 143.55, colorValue: 3}
...
It isn't working and the pie chart colours are their default.

How can I do this?
解决方案
According to the docs, colorValue is only available on TreeMaps.

However, you can do a similar thing without much difficulty. Instead of colorValue, use color, and then call to a function to get a value. Here's a quick-and-dirty example that can be improved in various ways depending on exactly what behavior you want:
var getColor = function (step,stepCount) {
    var scaledHex = Math.floor(255*step/(stepCount+1)).toString(16);
    console.log(scaledHex);
    return '#FF'+scaledHex+scaledHex;
};
And
...
{name: "Leisure", y: 143.55, color: getColor(1,3)}
...
http://jsfiddle.net/8Lnzcnx6/

                        
这篇关于Highcharts饼图切片颜色强度使用colorValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！