React-Chartjs-2如何创建Y轴虚线网格线？

你当前代码里用的tickBorderDash是用来设置Y轴刻度线（轴上的小短线）的虚线样式，而非图表区域内的网格线。要实现Y轴网格线虚线效果，需要在grid配置里使用borderDash属性：

修改你的options配置如下：

const options = {
    scales: {
        y: {
            grid: {
                // 用borderDash设置网格线的虚线样式
                borderDash: [4, 4],
                color: '#000', // 网格线颜色
                lineWidth: 2, // 网格线宽度
                drawOnChartArea: true // 确保在图表区域内绘制网格线
            },
            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};

关键说明： #

• borderDash: [4, 4]：数组第一个值是虚线中实线部分的长度，第二个值是空白间隔的长度，可根据需求调整数值
• 如果需要保留刻度线的自定义样式，可以单独配置tick对象里的属性，比如tick.borderDash来设置刻度线的虚线效果

完整的组件代码示例：

import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';

ChartJS.register(...registerables);

const data = {
    labels: ["Label1", "Label2", "Label3"],
    datasets: [{
        label: 'legend1',
        data: [12, 19, 3],
    },{
        label: 'legend2',
        data: [22, 9, 13],
    }]
};

const options = {
    scales: {
        y: {
            grid: {
                borderDash: [4, 4],
                color: '#000',
                lineWidth: 2,
                drawOnChartArea: true
            },
            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};

const BarChart = (props) => {
    return (
        <Chart type='bar' data={data} options={options} />
    );
};

export default BarChart;

内容的提问来源于stack exchange，提问作者Naclin