我如何使用 ng2-charts 和 chartsJS 更改餅圖顏色？

Question

我有一個帶有此代碼的餅圖

<div class="chart-wrapper">
    <canvas baseChart [data]="values" [labels]="keys" [chartType]="pieChartType" [options]="pieChartOptions" [plugins]="pieChartPlugins" [colors]="pieChartColors" [legend]="pieChartLegend">
  </canvas>
</div>

我有我的打字稿

` 
  /*public pieChartColors: Color = [
    {
      backgroundColor: [
        '#193498',
        '#113CFC',
        '#1597E5',
        '#69DADB'
      ]
    }
  ]*/

  constructor() {
    monkeyPatchChartJsTooltip();
    monkeyPatchChartJsLegend();
  }

}
Chart.defaults.global.defaultFontFamily = "Montserrat";
Chart.defaults.global.defaultFontSize = 13;
Chart.defaults.global.defaultFontColor = 'black';
`

我正在使用 angular，每次嘗試更改顏色屬性時，我都會收到“編譯失敗錯誤”，而我插入類的畫布會使我的組件崩潰。

---

    <div class="chart-wrapper">
    <canvas baseChart [data]="values" 
    [labels]="keys" 
    [chartType]="pieChartType" 
    [options]="pieChartOptions" 
    [plugins]="pieChartPlugins"
    [legend]="pieChartLegend"><!--[colors]="pieChartColors"-->
  </canvas>
</div>

注釋部分是將在打字稿組件中使用的類，注釋部分位於畫布標記內。

    public pieChartColors: Color = [
    {
      backgroundColor: [
        '#193498',
        '#113CFC',
        '#1597E5',
        '#69DADB'
      ]
    }
  ]

這部分導致圖表出現問題。

Type '{ backgroundColor: string[]; }[]' has no properties in common with type 'Color'.ts(2559)

這是錯誤。

Answer 1

<div class="chart-wrapper">
<canvas baseChart [data]="values" 
[labels]="keys" 
[chartType]="pieChartType" 
[options]="pieChartOptions" 
[plugins]="pieChartPlugins"
[legend]="pieChartLegend"><!--[colors]="pieChartColors"-->

注釋部分是將在打字稿組件中使用的類，注釋部分位於畫布標記內。

public pieChartColors: Color = [
{
  backgroundColor: [
    '#193498',
    '#113CFC',
    '#1597E5',
    '#69DADB'
  ]
}

]

這部分導致圖表出現問題。

Type '{ backgroundColor: string[]; }[]' has no properties in common with type 'Color'.ts(2559)

這是錯誤。

Answer 2

我修復了，這是 ng2-charts 和 chartJS 中的一個錯誤，它不允許我用顏色向班級收費。 可能是版本錯誤。