如何使用 ng2-charts 和图表 JS 更改饼图颜色？答案

【问题标题】：How i change a pie chart color with ng2-charts and chartsJS?如何使用 ng2-charts 和图表 JS 更改饼图颜色？
【发布时间】：2021-12-08 09:49:54
【问题描述】：

我有一个带有这段代码的饼图

<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)

这是错误。

【问题讨论】：

为什么 /* 在那里？那是你代码的一部分吗？
因为那部分让我的组件崩溃
您永远不会关闭您共享的代码中的评论。你有更多代码吗？

标签： angular typescript elasticsearch chart.js ng2-charts

【解决方案1】：

我已修复，这是 ng2-charts 和 chartJS 中的一个错误，它不允许我向班级收取颜色费用。可能是版本错误。

【讨论】：