chart.js Liniendiagramme: Füllen Sie die Fläche oberhalb der Linie, im Gegensatz zu unten und rechts
Habe ich eine chart.js die zeigt zwei verschiedene Linien, auf denen immer positiv-und eine, die immer negativ sein.
Möchte ich die Visualisierung der Raum zwischen den beiden Linien und den Wert von 0 auf der y-Achse und daher wollen füllen Sie unten das positiv-Linie und über der negativen Linie sowohl endend bei 0. Chart.js aber immer füllt in der Zeile unten rechts einer bestimmten Linie so weit wie ich kann erzählen.
Richtiges Verhalten: (aus chartist.js)
Falsches Verhalten (von chart.js)
Weiß jemand, ob es möglich ist, etwas ähnliches, um das Aussehen der ersten Grafik mit chart.js?
bearbeitet:
Ich bin mit chart.js durch ember-plugin
{{ember-chart type='Line' data=dataPanelService.chartData width=500 height=600}}
so, ich bin nur vorbei in chartData. Es sollte mit den Standard-Optionen.
Den Diagramm-Daten in der dataPanelService:
chartData: {
labels: ["9 /15 /15", "9 /28 /15", "10 /5 /15", "10 /13 /15", "10 /19 /15", "10 /30 /15", "11 /15 /15"],
datasets: {
{
fillColor: "#FF1717",
pointColor: "#da3e2f",
data: [200000, 180000, 150000, 110000, 60000, 0, 0]
},
{
fillColor: "#4575b5",
pointColor: "#1C57A8",
data: [-300000, -300000, -300000, -150000, -150000, -20000, 0]
},
}
}
- Ja, es ist möglich, aber wir gonna müssen Sie einige code, um Ihnen zu sagen, wie. Es ist wahrscheinlich, dass die Serie nicht ordnungsgemäß erstellt.
- Ich habe den code Hinzugefügt, dass ich den Aufruf hier. vielen Dank für die Hilfe!
- Haben Sie versucht, die änderung der Art von "line" auf "Bereich", oder ein gestapeltes Flächendiagramm?
- Nach chart.js docs die Basis-Kategorien sind: Linien -, Balken -, radar -, polar-area und Kuchen/Krapfen. Ich bin mir ziemlich sicher, dass der Bereich Zeugs einfach config auf der Linie.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ausfüllen /Ausmalen der Bereich zwischen den Linien
Verlängern Sie einfach den chart zu schreiben, Ihre eigenen füllen Logik.
Beachten Sie, dass die animation ein bisschen komisch, weil die Füllung Logik. Es wäre einfacher, um die animation zu deaktivieren, um dies zu beheben, oder Sie könnten versuchen, eine variation von https://stackoverflow.com/a/33932975/360067 zu animieren, von der 0-Linie.
Album Vorhören
Skript
Fiddle - https://jsfiddle.net/fhxv0vL7/