Chart.js V2 Ticklines kein Gitter

Question

Ich benutze ChartJs V2. Der Versuch, keine horizontalen Gitterlinien zu haben, aber immer noch eine kleine Tick-Linie bei den Ticks. Wie ist das möglich? Ich bin mit Winkeldiagramme, die die globalen Optionen setzen zur Zeit:

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

Was ich habe:

Was ich will:

Answer 1

Was Sie brauchen hierfür sind Chart.js plugins.

Sie können Sie behandeln, was passiert, wenn Ereignisse wie das Rendern oder das Update ausgelöst werden.

Zum Beispiel möchten wir in Ihrem Fall erneut die Ticks zeichnen, die über das display:false Attribut options.scales.yAxes.gridLines gelöscht wurden.
Wir werden dann das afterDraw Ereignis benötigen. Plugins in Chart.js werden wie folgt erstellt:

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

---

Nachdem Sie nun wissen, wie zu tun, lassen Sie uns auf das konzentrieren, was zu tun.

Wir wollen die Tick-Linien auf den yAxes wieder anzeigen. Aber sie wurden entfernt (wie ich oben sagte).

Wir können sie nicht zurückbringen, aber da Chart.js Diagramme ein <canvas> Tag verwenden, können wir versuchen, sie noch einmal zu zeichnen.

es dynamisch zu tun (meisten, die ich zumindest kann), werden wir in den verschiedenen Zecken Ihrer y Axt und eine Schleife müssen, indem auch die Höhe Ihrer Axt bekommen, werden wir in der Lage sein zu ziehen unsere eigenen Ticks.

---

Hier wird a jsFiddle ( vom OP verbessert) mit einer Erklärung über das, was wir tun müssen, und natürlich ein voll funktionsfähiges Beispiel, und hier ist die Vorschau:

Answer 2

Die Rasterlinien display Option muss für den Tick-Teil der zu zeichnenden Gitternetzlinien auf true gesetzt werden.

Um nur die Häkchen anzuzeigen, verwenden Sie die Option drawOnChartArea, um die Gitternetzlinien im Diagramm zu deaktivieren.

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

EDIT:

JSFiddle