In Chart.js v2 werden Dataset-Beschriftungen ausgeblendet


106

Ich habe die folgenden Codes, um ein Diagramm mit Chart.js v2.1.3 zu erstellen:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

Die Codes sehen einfach aus, aber ich kann die Beschriftung nicht aus dem Diagramm entfernen. Ich habe viele Lösungen ausprobiert, die ich online gefunden habe, aber die meisten verwenden Chart.js v1.x.

Wie kann ich die Datensatzbezeichnungen entfernen?

Antworten:


249

Stellen Sie einfach die labelund tooltipOptionen so ein

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

Geige - http://jsfiddle.net/g19220r6/


funktioniert wie Charme, danke. Übrigens, wie kann man die Verlaufsfarbe des Liniendiagramms ändern?
Raptor

1
Sie meinen, wie man einen Farbverlauf als borderColor / backgroundColor verwendet. Erstellen Sie einfach eine im Kontext und verwenden Sie diese bei der Initialisierung - siehe jsfiddle.net/g9h6gtvx
potatopeelings

1
Was ist, wenn ich es auf einem Datensatz verwenden möchte, aber nicht auf dem anderen
Nick Alexander

Es klappt! Nur eine Frage: Wo haben Sie all diese Optionen gefunden?
Fangzhzh

38

hinzufügen:

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

am Anfang Ihres Skriptcodes;


Einfach und funktioniert perfekt. Ich bemerkte, dass die akzeptierte Antwort einige Dinge brach.
Stickdeodorant

9

Sie können den Tooltip auch in eine Zeile einfügen, indem Sie den "Titel" entfernen:

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

Geben Sie hier die Bildbeschreibung ein


8

Es ist genauso einfach wie das Hinzufügen von: legend: { display: false, }

// Oder wenn Sie möchten, können Sie diese andere Option verwenden, die auch funktionieren sollte:

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


Einfache Antwort, das Rad muss nicht neu erfunden werden.
TNT

Optionen: {legend: {display: false,}} Es hilft zu schreiben, in welchen Block es
eingefügt werden soll

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.