Chart.js v2-隐藏网格线

2020/11/05 21:02 · javascript ·  · 0评论

我正在使用Chart.js v2绘制简单的折线图。一切看起来都很好,除了我不想要的网格线:

我不想要的网格线

折线图的文档位于:https : //nnnick.github.io/Chart.js/docs-v2/#line-chart,但是我找不到任何有关隐藏那些“网格线”的信息。

如何删除网格线?

我找到了一种可在折线图中隐藏网格线的解决方案。

gridLines颜色设置为与div的背景颜色相同。

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

或使用

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

如果希望它们默认消失,则可以设置:

Chart.defaults.scale.gridLines.display = false;

如果要隐藏网格线但要显示yAxes,则可以设置:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]

好吧,没关系..我找到了窍门:

    scales: {
      yAxes: [
        {
          gridLines: {
                lineWidth: 0
            }
        }
      ]
    }

下面的代码删除了从图表区域删除网格线,而不是x&y轴标签中的网格线。

Chart.defaults.scale.gridLines.drawOnChartArea = false;
本文地址:http://javascript.askforanswer.com/chart-js-v2-yincangwanggexian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!