Chart.js v4如何通过JavaScript从图表对象获取数据集默认颜色？

在Chart.js v4中，自动分配的数据集颜色不再直接挂载在dataset对象的borderColor属性上（仅手动指定颜色时该属性才会存在），而是存储在数据集的**元数据（meta）**结构中。结合Angular+ng2-charts的场景，你可以按以下方式获取：

1. 监听图表就绪事件获取实例 #

在组件模板的图表标签上绑定chartReady事件，拿到初始化完成的Chart实例：

<canvas baseChart
        [data]="chartData"
        [type]="chartType"
        (chartReady)="onChartReady($event)">
</canvas>

2. 从元数据中提取自动分配的颜色 #

在组件的事件处理函数中，遍历数据集，通过getDatasetMeta方法获取对应元数据，再从数据点的配置中提取颜色（同一数据集的所有数据点共享默认颜色，取第一个即可）：

export class YourChartComponent {
  chartColors: string[] = [];

  onChartReady(chart: Chart) {
    this.chartColors = chart.data.datasets.map((_, index) => {
      const meta = chart.getDatasetMeta(index);
      // 获取边框色，若需填充色则替换为 backgroundColor
      return meta.data[0].options.borderColor;
    });
  }
}

3. 在模板中使用颜色数组 #

现在你可以直接在模板中遍历chartColors数组，为自定义按钮上色：

<button *ngFor="let color of chartColors" [style.borderColor]="color">
  自定义按钮
</button>

补充说明 #

• 如果是饼图/环形图，可通过meta.data[0].options.backgroundColor获取填充色
• 若需提前获取全局默认调色板（未渲染图表时），可直接调用Chart.js的内置配置：

  import { Chart } from 'chart.js';
  
  // 获取饼图类图表的默认填充色数组
  const defaultPalette = Chart.defaults.elements.arc.backgroundColor;
  // 获取折线/柱状图的默认边框色
  const defaultBorderColor = Chart.defaults.elements.line.borderColor;
  

内容的提问来源于stack exchange，提问作者gtl21