Highcharts - 每个切片的饼图颜色答案

【问题标题】：Highcharts - Pie chart Color for each sliceHighcharts - 每个切片的饼图颜色
【发布时间】：2020-03-05 13:24:36
【问题描述】：

我有一个带有 highcharts 的角度应用程序，在饼图的情况下，我有一个用于每个切片的颜色列表。我限制馅饼只有 10 片。我需要在切片上按从最大到最小的顺序添加一些颜色。

这是饼图配置：

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
     },
    }]
 };

colors 数组应该按照从最大到最小的顺序排列。问题是我还有一个折线图，当悬停时，线会更新饼图，因此大小会动态变化。

这是饼图的数据设置：

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 };
  }

以下是图表示例：

在这个例子中，橙色切片应该是"#205493"，因为它是颜色数组中的第一项。

关于如何实现这一点的任何想法？

【问题讨论】：

很高兴看到格式良好的帖子！为了帮助你，你可以给你的应用程序一个堆栈闪电战吗？为您提供帮助会容易得多！
当然，让我试试
结构太复杂，无法创建 stablitz，我无法复制
我认为你可以对presentationResults进行排序：this.pieChartOptions.series[0].data = presentationResults.sort((a,b)=>a-b)
嗨@pedrodotnet，您可以直接在一个点上设置颜色并动态更新它。例如：jsfiddle.net/BlackLabel/6m4e8x0y/4899

标签： angular typescript charts highcharts

【解决方案1】：

您可以直接在一个点上设置颜色并动态更新它。

series: [{
  type: 'pie',
  data: [
    { y: 20, color: 'red'},
    { y: 20, color: 'blue'},
    { y: 20, color: 'orange'}
  ]
}]

现场示例： http://jsfiddle.net/BlackLabel/6m4e8x0y/4899/

API 参考：

https://api.highcharts.com/highcharts/series.pie.data.color

https://api.highcharts.com/class-reference/Highcharts.Point#update

【讨论】：