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

Question

我正在使用 react-chartjs-2 并尝试在 y 轴上创建虚线网格线

我试图查看图表配置 Web： https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

但找不到窍门

这是我的代码：

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: {
                tickBorderDash: [4, 4],
                tickColor: '#000',
                tickWidth: 2,
                offset: true,
                drawTicks: true,
                drawOnChartArea: true
            },

            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};


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

    );
};

谢谢！

Answer 1

通过查看源代码，我发现由于某种原因y.grid.tickBorderDash选项仅适用于刻度线，不适用于网格线。 实际上，该选项仅适用于不受drawOnChartArea: true影响的行。

要使 y 轴网格线为虚线，必须设置y.border.dash选项。 这对我来说似乎不太一致，但这就是代码当前运行的方式。

所以这应该有效：

const options = {
    scales: {
        y: {
            border:{dash: [4, 4]}, // for the grid lines
            grid: {
                color: '#aaa', // for the grid lines
                tickColor: '#000', // for the tick mark
                tickBorderDash: [2, 3], // also for the tick, if long enough
                tickLength: 10, // just to see the dotted line
                tickWidth: 2,
                offset: true,
                drawTicks: true, // true is default 
                drawOnChartArea: true // true is default 
            },

            beginAtZero: true,
        },
        x: {
            display: false
        }
    },
};

注意：我使用charts.js 4.2.0（发布时的最新版本）进行了测试。