Usuwanie legendy z wykresów za pomocą chart.js v2

109

Tworzę stronę domową za pomocą Bootstrap, JQuery i Chart.js (v2). Moja implementacja działała przy użyciu v1, ale ostatnio właśnie dostałem się do Bower i pobrałem v2 używając tego.

Tworzę siatkę z 4 kolumnami, z których każda zawiera wykres kołowy, jednak skalowanie w wersji 2 jest dla mnie trochę mylące, aby zacząć działać. Chcę, aby wykresy były responsywne, aby odpowiednio skalowały się z mniejszymi urządzeniami, takimi jak tablety i smartfony, a jednym z moich problemów jest pozbycie się legendy wykresów, a także informacji o najechaniu kursorem myszy na sekcje mojego wykres.

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,
    });
});

Jeśli usunę puste pole „etykiety”, wykres przestanie działać. Wygląda na to, że u góry wykresu jest mały odstęp, który może wskazywać, że nagłówki są zapisane, ale są to po prostu puste ciągi.

Czy ktoś ma pomysł, jak usunąć legendę i opis najechania? Po prostu nie mogę pojąć, jak to jest używane

Jak tylko będę mieć czas, będę mógł objąć jsfiddle!

EDYCJA: Link do dokumentów: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Zeliax
źródło

Odpowiedzi:

258

Obiekt opcji można dodać do wykresu podczas tworzenia nowego obiektu Chart.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelDusk
źródło
1
Wielkie dzięki, korzystałem z React i tego co robić w sposób reagowania. <Donut data = {data} options = {{legenda: false}} />
Newton Sheikh
43

Możesz zmienić domyślne opcje, używając Chart.defaults.globalw pliku javascript. Dlatego chcesz zmienić opcje legendy i podpowiedzi.

Usuń legendę

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

Usuń podpowiedź

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

Oto pracujący skrzypek.

cmlonder
źródło
Chłodny. Nie potrafiłem używać tych funkcji, ponieważ nie wiedziałem, że mogę po prostu napisać te polecenia w moim JavaScript.
Zeliax
1

Wystarczy dodać legendę linii: {display: false}

Marynarka wojenna
źródło
6
czym ta odpowiedź różni się od innych odpowiedzi?
Shanteshwar Inde