问题描述
我想达到与这里所显示的相同的效果:
我的设置如下:
$('#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;
};
和
...
/ pre>
{name:Leisure,y:143.55,color:getColor(1,3)}
...
I am trying to achieve the same thing as seen here:
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
, usecolor
, 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)} ...
这篇关于Highcharts饼图切片颜色强度使用colorValue的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!