Chart.js V2勾选没有网格

I'm using ChartJs V2. Trying to have no horizontal gridlines but still have a little tick-line at the ticks. How is this possible? I'm using angular-charts to set the global options currently:

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

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

What I have:

是)我有的:

What I want:

我想要的是:

2 个解决方案

#1

What you need for this are Chart.js plugins.

你需要的是Chart.js插件。

They let you handle what is happening when events like the rendering or the update are triggered.

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

For instance, in your case, we want to draw again the ticks which were erased via the display:false attribute of options.scales.yAxes.gridLines.
We will then need the afterDraw event. Plugins in Chart.js are created like this :

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

Chart.pluginService.register({
    afterDraw: function(chart, easing) {
        // Your code in here
    }
});

Now that you know how to do, let's focus on what to do.

What we want is to redisplay the tick lines on the yAxes. But they were removed (as I said above).

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

We can't bring them back, but since Chart.js charts are using a <canvas> tag, we can try to draw them once again.

我们无法将它们带回来,但由于Chart.js图表使用的是

To do it dynamically (most I can at least), we will need to loop in the different ticks of your y axe and, by also getting the height of your axe, we will be able to draw our own ticks.

为了动态地进行动作(至少我可以),我们需要循环你的斧头的不同刻度,并且通过获得斧头的高度,我们将能够绘制我们自己的刻度。

Here is a jsFiddle ( improved by the OP) with some explanation about what we must do and of course a fully working example, and here is its preview :

#2

The gridlines display option must be set to true for the ticks part of the gridlines to be drawn.

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

To show only the ticks, use the drawOnChartArea option to turn off the gridlines on the chart.

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

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

EDIT:

JSFiddle

#1