在Chart.js中，我想显示如下图所示的虚线gridLines [英] In Chart.js I want to show dotted gridLines like in below image

问题描述

我正在开发chart.js中的图表，我想显示图中所示的虚线网格线。

解决方案

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

 选项：{
 scale：{
 //以下内容将影响数据集的垂直线（xAxe）
 xAxes：[{
 gridLines ：{
 //你可以改变颜色，破折号效果，主轴颜色等。
 borderDash：[8,4]，
颜色：＃348632
} 
}]，
 
 //这会影响数据集的水平线（yAxe）
 yAxes：[{
 gridLines：{
 borderDash：[8,4]，
颜色：＃348632
} 
}] 
} 
} 
  

既然你知道怎么做，只需按照你想要的方式改变它。

检查

I am developing a chart in chart.js and I want to show dotted gridlines like shown in the image.

解决方案

You can edit your dataset display in your chart options :

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"
            }
        }]
    }
}

Now that you know how to do it, just change it as how you want it to be.
Check Grid Line Configuration on Chart.js documentation (scroll down a bit) to see what's editable.

If needed, here are a working example on this jsFiddle and its result :

这篇关于在Chart.js中，我想显示如下图所示的虚线gridLines的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！