如何更改 Chart.js 中 Y 轴上的网格线样式？

Question

我正在使用Chart.js 版本3.7.0 来绘制图形。

我使用以下代码创建了一个类似于图像的图表。我只想将红框中的线表示为基于Y 轴的法线。

const myChart = new Chart(context, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '',
                barPercentage : 0.05,
                data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
                backgroundColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderWidth: 0.1
            },{
                type : 'bubble',
                data : [
                    {   
                        x : 20,
                        y : 80,
                        r : 50
                    },
                    {   
                        x : 40,
                        y : 19,
                        r : 20
                    },
                    {   
                        x : 60,
                        y : 3,
                        r : 1
                    },
                    {   
                        x : 80,
                        y : 5,
                        r : 20
                    },
                    {   
                        x : 100,
                        y : 2,
                        r : 5
                    },
                    {   
                        x : 120,
                        y : 3,
                        r : 5
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 20,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 50
                    }
                ],
                backgroundColor: 'rgba(148, 181, 115, 0.7)',
                borderColor     : 'rgba(228, 248, 188, 0.92)'
            }]
        },
        options: {
            responsive : false,
            plugins : {
                legend : {
                    display : false
                },
                chartAreaBorder: {
                    borderColor: 'rgba(255, 255, 255, 0.2)',
                    borderWidth: 2,
                }
            },
            scales: {
                x : {
                    display : false,
                    max : 100,
                    min : 0,
                    ticks : {
                        stepStze : 10,
                        callback : () => ('')
                    },
                    grid : {
                        drawTicks : false,
                        color : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y : {
                    max : 100,
                    min : 0,
                    ticks : {
                        stepSize : 5,
                        callback : () => ('')
                    },
                    grid : {
                        drawTicks: false,
                        drawBorder : true,
                        color : 'rgba(255, 255, 255, 0.2)',
                        borderDash : [5,5],
                        borderDashOffset : 2,
                        borderWidth : 2
                    }
                }
            },
            interaction : {
                mode : 'index'
            },
        },
        plugins: [chartAreaBorder]
    });};

我尝试过使用callback() 或查找并应用plugin，但它并没有给我想要的结果。如何添加代码？

Answer 1

您可以定义第二个 y 轴，仅负责绘制实心网格线。

y2: {
  max: 100,
  min: 0,
  ticks: {
    display: false,
    stepSize: 25
  },
  grid: {
    drawTicks: false,
    drawBorder: false,
    color: 'rgba(255, 255, 255, 0.2)'
  }
}

还可以添加y.gird.lineWidth，如下所示，以省略应该出现实线的虚线。

lineWidth: ctx => ctx.index % 5 ? 1 : 0

请查看您修改后的代码，看看它是如何工作的。

new Chart('chart', {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '',
                barPercentage : 0.05,
                data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
                backgroundColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderColor: [
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)',
                    'rgba(241, 246, 0, 1)'
                ],
                borderWidth: 0.1
            },{
                type : 'bubble',
                data : [
                    {   
                        x : 20,
                        y : 80,
                        r : 50
                    },
                    {   
                        x : 40,
                        y : 19,
                        r : 20
                    },
                    {   
                        x : 60,
                        y : 3,
                        r : 1
                    },
                    {   
                        x : 80,
                        y : 5,
                        r : 20
                    },
                    {   
                        x : 100,
                        y : 2,
                        r : 5
                    },
                    {   
                        x : 120,
                        y : 3,
                        r : 5
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 20,
                        r : 20
                    },
                    {   
                        x : 140,
                        y : 30,
                        r : 50
                    }
                ],
                backgroundColor: 'rgba(148, 181, 115, 0.7)',
                borderColor     : 'rgba(228, 248, 188, 0.92)'
            }]
        },
        options: {
            responsive : true,
            plugins : {
                legend : {
                    display : false
                },
                chartAreaBorder: {
                    borderColor: 'rgba(255, 255, 255, 0.2)',
                    borderWidth: 2,
                }
            },
            scales: {
                x : {
                    display : false,
                    max : 100,
                    min : 0,
                    ticks : {
                        stepStze : 10,
                        callback : () => ('')
                    },
                    grid : {
                        drawTicks : false,
                        //color : 'rgba(255, 255, 255, 0.2)',
                        borderWidth : 2
                    }
                },
                y : {
                    max : 100,
                    min : 0,
                    ticks : {
                        display: false,
                        stepSize : 5
                    },
                    grid : {                    
                        drawTicks: false,
                        drawBorder : true,
                        borderWidth : 2,     
                        borderDash : [5,5],
                        borderDashOffset : 2,
                        color : 'rgba(255, 255, 255, 0.2)', 
                        lineWidth: ctx => ctx.index % 5 ? 1 : 0
                    }
                },               
                y2 : {
                    max : 100,
                    min : 0,
                    ticks : {
                        display: false,
                        stepSize : 25
                    },
                    grid : {
                        drawTicks: false,
                        drawBorder : false,
                        color : 'rgba(255, 255, 255, 0.2)'
                    }
                }
            },
            interaction : {
                mode : 'index'
            },
        }
    });

body {
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chart"></canvas>