it-swarm.com.de

Legende in Diagrammen mit chart.js v2 entfernen

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

Ich erstelle ein Raster mit 4 Spalten, die jeweils ein Tortendiagramm enthalten. Die Skalierung in Version 2 ist jedoch etwas verwirrend für mich, damit ich arbeiten kann. Ich möchte, dass die Diagramme ansprechend sind, damit sie mit kleineren Geräten wie Tablets und Smartphones richtig skaliert werden. Eines meiner Probleme ist es, die Legende der Diagramme sowie die Hover-Informationen zu entfernen, wenn ich mit der Maus über die Bereiche meiner Karte fahre 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 so wie es aussieht, gibt es einen kleinen Abstand am oberen Rand des Diagramms, der darauf hindeuten könnte, dass die Überschriften geschrieben sind, aber es sich nur um leere Zeichenfolgen handelt.

Hat jemand eine Idee, wie man die Legende und die Hover-Beschreibung entfernt? Ich kann einfach nicht verstehen, wie das benutzt wird

Ich werde meine Hände um eine Geige legen, sobald ich Zeit habe!

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

85
Zeliax

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
         }
    }
});
214
BrightIntelDusk

Sie können die Optionen ändern, indem Sie Chart.defaults.global In 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.

40
cmlonder