Legende in Diagrammen mit chart.js v2 entfernen

105

Ich erstelle eine Homepage mit Bootstrap, JQuery und Chart.js (v2). Ich hatte meine Implementierung mit v1, bin aber erst kürzlich in Bower eingestiegen und habe v2 damit heruntergeladen.

Ich erstelle ein Raster mit 4 Spalten, die jeweils ein Kreisdiagramm enthalten. Die Skalierung in Version 2 ist jedoch verwirrend, damit ich arbeiten kann. Ich möchte, dass die Diagramme reagieren, damit sie mit kleineren Geräten wie Tablets und Smartphones richtig skaliert werden können. Eines meiner Probleme besteht darin, die Legende der Diagramme sowie die Schwebeinformationen zu entfernen, wenn Sie mit der Maus über die Abschnitte meines Diagramms fahren Diagramm.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

Wenn ich das leere Feld "Beschriftungen" entferne, funktioniert das Diagramm nicht mehr. Und wie es aussieht, gibt es oben im Diagramm einen kleinen Abstand, der darauf hinweisen könnte, dass die Überschriften geschrieben sind, aber es sind nur leere Zeichenfolgen.

Hat jemand eine Idee, wie man die Legende und die Schwebebeschreibung entfernt? Ich kann mich einfach nicht vorstellen, wie das verwendet wird

Ich werde eine jsfiddle in die Hände bekommen, sobald ich Zeit habe!

BEARBEITEN: Link zu den Dokumenten: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Zeliax
quelle

Antworten:

252

Das Optionsobjekt kann dem Diagramm hinzugefügt werden, wenn das neue Diagrammobjekt erstellt wird.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelDusk
quelle
1
Vielen Dank, ich habe React verwendet und dies muss auf reaktive Weise geschehen. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh
42

Sie können Optionen ändern, indem Sie sie Chart.defaults.globalin Ihrer Javascript-Datei verwenden. Sie möchten also die Optionen für Legenden und QuickInfos ändern.

Legende entfernen

Chart.defaults.global.legend.display = false;

Tooltip entfernen

Chart.defaults.global.tooltips.enabled = false;

Hier ist ein arbeitender Geiger.

cmlonder
quelle
Cool. Ich wusste nicht, wie ich diese Funktionen verwenden sollte, da ich nicht wusste, dass ich diese Befehle einfach in mein Javascript schreiben konnte.
Zeliax
1

Sie müssen lediglich diese Zeilenlegende hinzufügen: {display: false}

Marine
quelle
5
Wie unterscheidet sich diese Antwort von anderen Antworten?
Shanteshwar Inde