Chart.js vertikal symmetrisch Diagramm

Question

Ich habe eine in Chart.js gemacht Diagramm wie folgt:

<canvas id="customer_chart" height="50"></canvas> 

<script> 
var ctx = document.getElementById('customer_chart').getContext('2d'); 

var chart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     labels: ['', 'Conference', 'Webinar', 'Trial'], 
     datasets: [{ 
      label: 'Pipeline', 
      lineTension: 0.3, 
      data: [0, 10, 20, 15], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
      ], 
     }], 
    } 
}) 
</script> 

Aber was ich will, ist so etwas wie dies (ohne die Zahlen auf der linken Seite den Kopf , faul edit):

Aber ich sehe keinen sofort offensichtlichen Weg, dies zu tun. Irgendwelche Ideen?

Answer 1

Wenn Sie zufällig einen Blick in Chart.js docs nehmen, Sie können sehen Sie plugins for your chart erstellen können.
Plugins können Sie einige Ereignisse behandeln wie beforeUpdate, afterDraw usw. Ihr Diagramm zu bearbeiten, bevor es angezeigt wird oder nach dem alles (einige Daten hinzufügen) ist zeichnen (etwas vor allem zu ziehen).

Für das, was Sie wollen, sollten Sie die beforeInit Veranstaltung benötigen, da Sie Ihr Diagramm bearbeiten müssen, bevor sie erstellt wird.

By the way, Plugins werden wie folgt erstellt:

Chart.pluginService.register({ 
    beforeInit: function(chart) { 
     // what you put here will be done before the chart initiates 
    } 
}); 

---

Jetzt wissen Sie, was zu verwenden, um zu tun, was Sie wollen.

Ich machte noch ein Beispiel, wo ich einen anderen Datensatz mit den gleichen Daten erstellt, aber im negativen.
Sie können the result here sehen.

Ich musste jQuery verwenden, um einen Klon des ersten Datensatzes (see this answer) zu erstellen.
Ich könnte es nicht ohne es schaffen, aber wenn Sie einen Weg finden, würde ich es gerne hören.