[英]Highcharts - Pie chart Color for each slice
I have an angular app with highcharts, in the case of the pie chart, I have a list of colors to use on each slice.我有一个带有 highcharts 的 angular 应用程序,在饼图的情况下,我有一个要在每个切片上使用的颜色列表。 I restricted the pie to have only 10 slices.
我限制馅饼只有 10 片。 I need to put some colors on the slices in order from the biggest slice to the smallest.
我需要在切片上按从最大切片到最小切片的顺序添加一些颜色。
Here's the pie chart configuration:这是饼图配置:
pieChartOptions = {
chart: {
type: "pie"
},
title: {
enabled: true,
text: this.xAxis.name + " by Daypart",
verticalAlign: "top",
align: "left"
},
credits: {
enabled: false
},
xAxis: {
title: {
text: this.xAxis.name
}
},
yAxis: {
title: {
text: "Reach"
}
},
series: [{
data: null,
colors: ["#205493", "#BE5873", "#81CACF", "#E98841", "#E3D830", "#A6C46F",
"#894C7B", "#BA9765", "#7F7F7F", "#C3C3C3"],
dataLabels: {
enabled: false
},
}]
};
The colors
array should be in order from the biggest slice to the smallest. colors
数组应按从最大切片到最小切片的顺序排列。 The problem is that I also have a line chart that when on hover the line updates the pie chart, so the sizes are dymamically changing.问题是我还有一个折线图,当悬停时该线会更新饼图,因此尺寸会动态变化。
Here's the data setup for the pie chart:这是饼图的数据设置:
loadCharts() {
let presentationResults: OptimizationAllocationGroupByTrps[] | OptimizationAllocationGroupByCost[] = [];
this.xAxis.name = this.selectedOption == null ? "TRP" : this.selectedOption;
if (this.selectedOption === "Budget") {
presentationResults = [...this.projectResults.OptimizationAllocationGroupByCost];
} else {
presentationResults = [...this.projectResults.OptimizationAllocationGroupByTRPs];
}
this.chartOptions.series[0].name = this.xAxis.name;
this.chartOptions.series[0].data = [];
this.chartOptions.series[0].data = [... this.projectResults.Curves.filter(x => x.Type === this.xAxis.name)[0].Points];
presentationResults.forEach((oa: OptimizationAllocationGroupByTrps | OptimizationAllocationGroupByCost) => {
if (oa.name.indexOf("%") === -1) {
oa.y = (Math.round(oa.y * 100) / 100);
oa.name = oa.name + ": " + oa.y + "%";
}
});
if (presentationResults.length > 10) {
let accumPercentage: number = 100;
presentationResults.sort((v1: any, v2: any) => v1.y > v2.y ? -1 : 1).length = 9;
presentationResults.forEach(updateResult => {
accumPercentage -= updateResult.y;
});
presentationResults.push({name: "Others: " + Math.round(((accumPercentage))) + "%", y: accumPercentage});
}
this.pieChartOptions.series[0].data = presentationResults;
this.pieChartOptionsBig.series[0].data = presentationResults;
console.log(this.pieChartOptions.series[0].data);
this.chartOptions.xAxis.title.text = this.xAxis.name;
this.chartOptions.title.text = "Reach +1/" + this.xAxis.name;
this.pieChartOptions.title.text = this.xAxis.name + " by Daypart";
this.pieChartOptionsBig.title.text = this.xAxis.name + " by Daypart";
this.chartOptions = {... this.chartOptions };
this.pieChartOptions = {... this.pieChartOptions };
this.pieChartOptionsBig = {... this.pieChartOptionsBig };
}
And here's an example of the charts:这是图表的示例:
On this example the orange slice should be "#205493"
As is the first item on the colors array.在此示例中,橙色切片应为
"#205493"
因为它是颜色数组中的第一项。
Any ideas on how to achieve this?关于如何实现这一目标的任何想法?
You can set a color directly on a point and update it dynamically.您可以直接在一个点上设置颜色并动态更新它。
series: [{
type: 'pie',
data: [
{ y: 20, color: 'red'},
{ y: 20, color: 'blue'},
{ y: 20, color: 'orange'}
]
}]
Live example: http://jsfiddle.net/BlackLabel/6m4e8x0y/4899/现场示例: http : //jsfiddle.net/BlackLabel/6m4e8x0y/4899/
API Reference: API参考:
https://api.highcharts.com/highcharts/series.pie.data.color https://api.highcharts.com/highcharts/series.pie.data.color
https://api.highcharts.com/class-reference/Highcharts.Point#update https://api.highcharts.com/class-reference/Highcharts.Point#update
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.