Chart.js V2 ticklines没有网格

Question

我正在使用ChartJs V2。试图没有水平网格线，但在刻度线上仍然有一点勾号线。这怎么可能？我正在使用角度图表来设置当前的全局选项：

scales: {
            yAxes: [{
                gridLines: {
                    display: false,
                    drawTicks: true,
                }
            }],
        }

我有什么：

我想要的是什么：

Answer 1

您需要的是Chart.js plugins。

它们可以让您处理触发渲染或更新等事件时发生的事情。

例如，在您的情况下，我们想要再次绘制通过display:false的{​​{1}}属性删除的刻度。
然后我们需要options.scales.yAxes.gridLines事件。 Chart.js中的插件是这样创建的：

afterDraw

<小时/> 既然您知道如何，那么让我们专注于要做什么。

我们想要的是重新显示yAxes上的刻度线。但他们被删除了（正如我上面所说）。

我们无法将它们带回来，但由于Chart.js图表​​使用<canvas>标记，我们可以尝试再次绘制它们。

要动态地执行此操作（我至少可以），我们需要循环使用 Chart.pluginService.register({ afterDraw: function(chart, easing) { // Your code in here } }); ax的不同刻度，并且获得斧头的高度，我们将能够绘制自己的蜱虫。

<小时/> 这是a jsFiddle（通过OP 进行了改进），并对我们必须做的事情做了一些解释，当然还有一个完整的例子，这是它的预览：

Answer 2

网格线display选项必须设置为true才能绘制网格线的刻度线部分。

要仅显示刻度线，请使用drawOnChartArea选项关闭图表上的网格线。

scales: {
        yAxes: [{
            gridLines: {
                display: true,
                drawOnChartArea: false,
            }
        }],
    }

编辑：

JSFiddle