在Chart.js中,我想显示如下图所示的虚线gridLines

Question

我在chart.js中开发一个图表,我想显示图像中显示的虚线网格线.

Answer 1

我正在使用 Chart.js 版本：9.2.0。对我来说，工作了以下代码：

options: {
    cubicInterpolationMode: 'monotone',
    plugins: {legend: false},
    scales: {
        x: {
            grid:{
                color: 'magenta',
            },
            border: {
                dash: [2,4],
            },  
            ticks: {display: false}
        },
        y: {
            grid: {
                color: 'magenta',
            },
            border: {
                dash: [2,4],
            }, 
            ticks: {
                callback: function(value) {
                    return value + 'k';
                }
            }
       }
    }
}

我得到的结果： 结果，带有虚线网格线的图表

主要部分是border: {dash: [2,4]}. 我通过实验发现了它，因为解决方案 gridLines: {borderDash: [8, 4]}对我不起作用，所以它可能不是最好的解决方案

我在Chart.js 页面找到了有关轴样式的信息

Answer 2

您可以在图表选项中编辑数据集显示:

options: {
    scales: {
        // The following will affect the vertical lines (xAxe) of your dataset
        xAxes: [{
            gridLines: {
                // You can change the color, the dash effect, the main axe color, etc.
                borderDash: [8, 4],
                color: "#348632"
            }
        }],

        // And this will affect the horizontal lines (yAxe) of your dataset
        yAxes: [{
            gridLines: {
                borderDash: [8, 4],
                color: "#348632"
            }
        }]
    }
}

既然您知道如何做到这一点,只需按照您希望的方式进行更改即可.
检查Chart.js文档中的网格线配置(向下滚动一下)以查看可编辑的内容.

如果需要,这里有一个关于这个jsFiddle及其结果的工作示例: