一个朋友帮助我使用Charts.js，我现在正在尝试在脑海中逆向工程他所做的显示数据的工作，使数据显示我喜欢的方式。通常有8-10行要画，所以我试图通过引入颜色使数据更容易阅读。
我可以通过设置borderColor的值使每条线都具有唯一的颜色，但是出现在线上的点与线不匹配，而是随着它们沿着线的移动而改变。我希望点与线一致。我不确定我在哪里出了问题。有人能帮助我解决这些颜色问题吗？

为了简单起见，我把下面的代码裁剪成了3种颜色，但是我在代码中Map出了11种颜色。下面的代码将沿着每条线循环3种点颜色。我所追求的是线的颜色，背景和点的颜色来匹配。

<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,
};