我有一张Highcharts饼图，我正在使用径向渐变。
演示： http://jsfiddle.net/19vyugeL/1/
问题：将特定渐变颜色应用于特定的饼图切片。对于普通颜色，我使用颜色：数据，但我不知道如何使用渐变颜色。
目标：我希望“剩余”预算切片显示当前颜色，所有“花费”切片为另一种颜色（绿色）。
$(function () {
// Create the chart
$('#container9').highcharts({
colors: [{
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, RemainingColor1],
[1, RemainingColor2]
]
}, {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, SpentColor1],
[1, SpentColor2]
]
}],
chart: {
type: 'pie',
marginTop: 50,
marginBottom: 5,
},
title: {
text: 'Total Budget - $440,000'
},
subtitle: {
text: 'Total Spent - $103,057'
},
plotOptions: {
series: {
borderWidth: 2
},
pie: {
allowPointSelect: true,
borderWidth: 3,
borderColor: 'black',
dataLabels: {
style: {
fontSize: 9,
},
distance: -1,
y: -10,
x: 10,
color: TextColor,
enabled: true,
inside: true,
verticalAlign: 'top',
format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
}
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% - ${point.spend} of Total'
},
series: [{
name: new Date().getFullYear() + " National Spend ",
data: [{
name: new Date().getFullYear() + " Remaining Budget",
y: 79,
spend: '336,943',
// color: RemainingColor1,
}, {
name: "Wave 2",
y: 23,
// color: SpentColor1,
spend: '97,693'
}, {
name: "Wave 3",
y: 3,
// color: SpentColor1,
spend: '5,364',
}]
}]
});
});
答案 0 :(得分：1)
定义数组颜色，然后在分配颜色时可以访问它：
$(function () {
colors = [{
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, RemainingColor1],
[1, RemainingColor2]
]
}, {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, SpentColor1],
[1, SpentColor2]
]
}];
// Create the chart
$('#container9').highcharts({
chart: {
type: 'pie',
marginTop: 50,
marginBottom: 5,
},
title: {
text: 'Total Budget - $440,000'
},
subtitle: {
text: 'Total Spent - $103,057'
},
plotOptions: {
series: {
borderWidth: 2
},
pie: {
allowPointSelect: true,
borderWidth: 3,
borderColor: 'black',
dataLabels: {
style: {
fontSize: 9,
},
distance: -1,
y: -10,
x: 10,
color: TextColor,
enabled: true,
inside: true,
verticalAlign: 'top',
format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
}
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% - ${point.spend} of Total'
},
series: [{
name: new Date().getFullYear() + " National Spend ",
data: [{
name: new Date().getFullYear() + " Remaining Budget",
y: 79,
spend: '336,943',
color: colors[0],
}, {
name: "Wave 2",
y: 23,
color: colors[1],
spend: '97,693'
}, {
name: "Wave 3",
y: 3,
color: colors[1],
spend: '5,364',
}]
}]
});
});