如何使用ChartJS显示虚网格线?

mcvgt66p  于 2023-02-04  发布在  Chart.js
关注(0)|答案(2)|浏览(235)


我正在chart.js中开发一个图表,我想显示虚线网格线,如图所示。

1u4esq0p

1u4esq0p1#

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

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文档中的网格线配置,查看哪些是可编辑的。
如果需要,下面是一个工作示例on this jsFiddle及其结果:

fgw7neuy

fgw7neuy2#

我正在使用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';
                }
            }
       }
    }
}

我得到的结果是:the result, the chart with dashed grid lines
主要部分是border: {dash: [2,4]},我是通过实验发现的,因为gridLines: {borderDash: [8, 4]} didt的解决方案对我有效,所以它可能不是最佳解决方案
我在chart.js页面找到了关于轴样式的信息

相关问题