问Charts.js颜色有问题

EN

<script setup lang="ts">
import { Line } from "vue-chartjs";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
} from "chart.js";
import type { DataYearlyGrowth} from "@/types/myData";
import { useDark } from "@vueuse/core";

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale
);

const props = defineProps<{ data: Array<DataYearlyGrowth> }>();

const chartId = "line-chart";
const datasetIdKey = "label";
const width = 300;
const height = 100;
const styles = {};

const yearlyGrowthValues = props.data;
const years = [...new Set(yearlyGrowthValues.map((x) => x.year.toString()))];

const dataByTypes = yearlyGrowthValues.reduce((rv, x) => {
  (rv[x.type] = rv[x.type] || []).push(x.value);
  return rv;
}, {} as { [key: string]: Array<any> });

const chartData = {
  labels: years,
  datasets: Object.keys(dataByTypes).map((key) => ({
    text: 'Yearly growth',
    label: key,     // TODO: Make the font colour white
    data: dataByTypes[key],
    hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
    borderColor:    // Line colour
      [
        'rgba(138, 20, 21, 0.8)',
        'rgba(241, 16, 22, 0.8)',
        'rgba(249, 148, 0, 0.8)'
      ],
    backgroundColor: // Middle of line colour. Just colours the square in the key
       [
         'rgba(138, 20, 21, 1)',
         'rgba(241, 16, 22, 1)',
         'rgba(249, 148, 0, 1)'
       ],
    pointBackgroundColor:   // Colours the middle of the points where data intersects years
      [
        'rgba(138, 20, 21, 0.8)',
        'rgba(241, 16, 22, 0.8)',
        'rgba(249, 148, 0, 0.8)'
      ],
    fill: true,
    borderWidth: 2,
    cubicInterpolationMode: 'monotone',
    //stepped:  'middle',
    stepped: false,
    borderJoinStyle: "round",
    tension: 0.2,
  }))
};

const chartOptions = {
responsive: true,
};

</script>

<template>
  <div class="bg-qual-mid">
    <Line
      :chart-options="chartOptions"
      :chart-data="chartData as any"
      :chart-id="chartId"
      :dataset-id-key="datasetIdKey"
      :plugins="[]"
      :styles="styles"
      :width="width"
      :height="height"
    />
  </div>
</template>

const chartOptions = {
 legend: {
   labels: {
    fontColor: 'white' 
   }
 },
responsive: true,
};