如何在chart.js/ng2-charts 中为极坐标图背景中的单个环着色？答案

【问题标题】：How to colorize individual rings in polar chart background in chart.js/ng2-charts?如何在chart.js/ng2-charts 中为极坐标图背景中的单个环着色？
【发布时间】：2022-01-11 20:06:54
【问题描述】：

我正在尝试使用 Angular 中的 chart.js 版本和 ng2-charts 更改单个极坐标图环的颜色，但在特定版本的文档中，我没有找到任何与之相关的内容，也没有在网络上搜索解决方案.

"chart.js": "^2.8.0",
"ng2-charts": "^2.3.0",

代码：

  public polarAreaChartLabels: Label[] = [];

  public polarAreaChartData: SingleDataSet = [];

  public polarAreaLegend = true;

  myColors = [{ backgroundColor: ["#cb4b4b", "#edc240", "#afd8f8"] }];

  public polarAreaChartType: ChartType = "polarArea";

  public polarAreaChartOptions: ChartOptions = {
    plugins: {
      datalabels: {
         color: '#000000',
         anchor: 'end',
         align: 'end',
         padding: 50,
         display: true,
         font: {
           weight: 'bolder'
         },
         formatter: function(value, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
       },
      },
    },
    scale: {
      ticks: {
          beginAtZero: true,
          max: 100,
          min: 0,
          stepSize: 10
      }
    }
  };

  public ChartPlugins = [pluginDataLabels];

HTML：

            <canvas id="polar-chart" baseChart height="40vh" width="120vw" 
                [data]="polarAreaChartData" 
                [labels]="polarAreaChartLabels"
                [legend]="polarAreaLegend"
                [plugins]="ChartPlugins"
                [options]="polarAreaChartOptions"
                [chartType]="polarAreaChartType" 
                [colors]="myColors">        
            </canvas>

电流输出

期望的输出

有没有可用的插件或解决方案？任何帮助将不胜感激。

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

这可以通过将scale.gridLines.color 选项定义为颜色数组来完成。

options: {
  scale: {
    gridLines: {
      color: [...]
    }
  }
}

请看下面的可运行代码，看看它是如何工作的。

window.myChart = new Chart('canvas', {
  type: 'polarArea',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [4, 5, 4, 2, 6],
      backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)']
    }]
  },
  options: {
    scale: {
      gridLines: {
        color: ['black', 'orange', 'yellow', 'green', 'blue']
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>   
<canvas id="canvas"></canvas>

【讨论】：