React Chart.js 中 Y 轴边框颜色的精确控制

import React from 'react';
import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

// 注册 Chart.js 组件，这是使用 Chart.js 的必要步骤
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const LineChart = () => {
  const data = {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    datasets: [
      {
        label: '销售额',
        data: [65, 59, 80, 81, 56, 55],
        fill: false,
        borderColor: 'rgba(75,192,192,1)',
        tension: 0.1,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '月度销售趋势',
      },
    },
    scales: {
      x: {
        // X 轴配置
        grid: {
          display: false, // 通常我们不希望 X 轴有垂直网格线
        },
        border: {
          color: 'blue', // 设置 X 轴的边框颜色
        },
      },
      y: {
        // Y 轴配置
        beginAtZero: true,
        grid: {
          color: 'rgba(200, 200, 200, 0.3)', // 设置 Y 轴的水平网格线颜色，注意这与轴本身不同
        },
        border: {
          display: true, // 确保 Y 轴边框显示
          color: 'red',   // <--- 关键：在这里设置 Y 轴的边框颜色
          width: 2,       // 可以同时设置边框宽度
        },
        ticks: {
          color: 'purple', // Y 轴刻度文本颜色
        },
      },
    },
  };

  return <Line data={data} options={options} />;
};

export default LineChart;