2016-08-02 7 views
0

Ich benutze ChartJS in meinem Projekt (genauer gesagt ng2-Charts für Angular 2, das auf der Originalbibliothek basiert).Gibt es eine Möglichkeit, ChartJS über der Legende zu verstecken/anzupassen?

ich es sehe, ist eine Option:

Legende: false | true

aber ich besonders ärgerlich tot finden können entfernen die obere Legende (die jede Zeile beschreibt in das Liniendiagramm zum Beispiel). Unten können Sie sehen, was ich meine:

enter image description here

habe ich versucht, mit

.chart-legend { 
    visibility: hidden; 
    display: none; 
} 

inspiriert von Chartjs Legend Styling

aber ich denke, dass (unten Legende) auf eine andere Legende gilt. Gibt es eine Möglichkeit, die obere Legende anzupassen/auszublenden?

Gibt es auch eine Option zum Ändern der x/y-Achse Etikettenausrichtung? (z. B. werden sie vertikal statt diagonal angezeigt)

Antwort

4

Beim Erstellen eines Diagramms können Sie ihm verschiedene Diagrammoptionen zuweisen. Eine der möglichen Optionen ist die Legend Configuration. Um die Legende auszublenden, einfach eine Option wie folgt verwenden:

options: { 
    legend: { display: false } 
} 

Obwohl ich nicht NG2-Charts verwendet, auf der Suche durch die documentation (speziell die Charts Beispiel) es scheint, Sie können einfach eine Diagrammlegende boolean definieren wie dies:

public lineChartLegend:boolean = true; 

Und dann diesen Wert auf das Diagramm wie folgt hinzu:

<base-chart class="chart" 
        ... 
        [legend]="lineChartLegend" 
        [chartType]="lineChartType" 
        ...></base-chart> 

Schließlich ist der wahrscheinlichste Grund, warum Chartjs Legend Styling Lösung nicht Arbeit ist, dass es für chart.js v1.x entworfen wurde, während ng2-Diagramme scheint, mit chart.js v2.x zu arbeiten, die eine bedeutende Änderung zur vorherigen Version ist.

Hoffe, das hilft!

+0

hinzugefügt zu den Optionen ([Optionen] in ng2-Charts) gearbeitet. Danke! – dragonmnl