angular-chartJs更改图表背景和突出显示颜色

import { Component } from '@angular/core';
import { ChartOptions } from 'chart.js';

@Component({
  selector: 'app-chart',
  template: `
    <canvas baseChart
            [datasets]="chartData"
            [labels]="chartLabels"
            [options]="chartOptions"
            [chartType]="'bar'">
    </canvas>
  `
})
export class ChartComponent {
  chartData = [
    { data: [10, 20, 30], label: 'Series A' },
    { data: [15, 25, 35], label: 'Series B' }
  ];
  chartLabels = ['Label 1', 'Label 2', 'Label 3'];
  chartOptions: ChartOptions = {
    responsive: true,
    scales: {
      x: { grid: { display: false } },
      y: { grid: { display: false } }
    },
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false }
    },
    backgroundColor: 'red' // 设置图表的背景颜色为红色
  };
}

import { Component } from '@angular/core';
import { ChartOptions } from 'chart.js';

@Component({
  selector: 'app-chart',
  template: `
    <canvas baseChart
            [datasets]="chartData"
            [labels]="chartLabels"
            [options]="chartOptions"
            [chartType]="'bar'">
    </canvas>
  `
})
export class ChartComponent {
  chartData = [
    { data: [10, 20, 30], label: 'Series A', backgroundColor: 'blue' }, // 将Series A的柱状图背景颜色设置为蓝色
    { data: [15, 25, 35], label: 'Series B' }
  ];
  chartLabels = ['Label 1', 'Label 2', 'Label 3'];
  chartOptions: ChartOptions = {
    responsive: true,
    scales: {
      x: { grid: { display: false } },
      y: { grid: { display: false } }
    },
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false }
    },
    backgroundColor: 'white'
  };
}