使用ng2-charts与Chart.js修改饼图颜色出现报错如何解决？

错误根因 #

你为pieChartColors变量声明的类型为单个Color对象，但实际赋值的是包含颜色配置的数组结构，二者类型不匹配触发了TS2559编译错误。

修复步骤 #

1. 修正TypeScript类型定义 #

将pieChartColors的类型从Color改为Color[]（Color数组类型），修改后代码如下：

// 需确保从ng2-charts导入正确的Color类型
import { Color } from 'ng2-charts';

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

如果类型导入异常，也可以删除显式类型声明，让TypeScript自动推断变量类型，同样可以解决编译报错。

2. 恢复模板绑定 #

取消canvas标签内[colors]="pieChartColors"的注释，恢复属性绑定即可：

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

高版本兼容说明 #

如果你使用的是ng2-charts v4及以上版本，[colors]独立绑定属性已废弃，需将颜色配置整合到图表options中，无需单独声明pieChartColors变量，示例配置如下：

public pieChartOptions: ChartOptions<'pie'> = {
  responsive: true,
  datasets: {
    pie: {
      backgroundColor: ['#193498', '#113CFC', '#1597E5', '#69DADB']
    }
  }
}

内容的提问来源于stack exchange，提问作者Andrés Valero