在React LineChart中自定义Y轴颜色

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

// 注册Chart.js所需的组件
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

// 图表配置选项
export const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top', // 图例位置
    },
    title: {
      display: true,
      text: 'React LineChart Y轴颜色示例', // 图表标题
    },
  },
  scales: {
    y: { // Y轴配置
      beginAtZero: true, // Y轴从0开始
      // 关键：设置Y轴边框颜色和宽度
      border: {
        color: 'rgb(255, 99, 132)', // 将Y轴颜色设置为红色
        width: 2, // Y轴线宽度
      },
      grid: {
        display: false, // 确保不显示Y轴的网格线，以保持界面整洁
      },
      ticks: {
        color: 'rgb(75, 192, 192)', // 可选：设置Y轴刻度标签的颜色
      }
    },
    x: { // X轴配置
      border: {
        color: 'rgb(53, 162, 235)', // 可选：设置X轴边框颜色
        width: 2, // X轴线宽度
      },
      grid: {
        display: false, // 确保不显示X轴的网格线
      },
      ticks: {
        color: 'rgb(53, 162, 235)', // 可选：设置X轴刻度标签的颜色
      }
    }
  },
};

// 示例数据
const labels = ['一月', '二月', '三月', '四月', '五月', '六月', '七月'];

export const data = {
  labels,
  datasets: [
    {
      label: '数据集 1',
      data: labels.map(() => Math.random() * 1000),
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
    },
    {
      label: '数据集 2',
      data: labels.map(() => Math.random() * 1000),
      borderColor: 'rgb(53, 162, 235)',
      backgroundColor: 'rgba(53, 162, 235, 0.5)',
    },
  ],
};

// 渲染带有自定义轴颜色的折线图组件
export function LineChartWithCustomAxisColor() {
  return <Line options={options} data={data} />;
}