javascript Rimozione della legenda dai grafici con chart.js v2




jquery css (2)

Sto creando una homepage usando Bootstrap, JQuery e Chart.js (v2). Ho avuto la mia implementazione funzionante con v1, ma recentemente sono entrato in Bower e scaricato v2 usando quello.

Sto realizzando una griglia di 4 colonne ognuna contenente un grafico a torta, tuttavia il ridimensionamento in v2 è un po 'confuso per me funzionare. Voglio che i grafici siano reattivi in ​​modo che si ridimensionino correttamente con i dispositivi più piccoli come tablet e smartphone, e uno dei miei problemi è sbarazzarsi della legenda dei grafici e delle informazioni al passaggio del mouse quando si passa il mouse sopra le sezioni del mio grafico.

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

Se rimuovo il campo vuoto "etichette" il grafico non funziona più. E a quanto pare c'è una piccola spaziatura nella parte superiore del grafico che potrebbe indicare che le intestazioni sono scritte, ma sono solo stringhe vuote.

Qualcuno ha un'idea di come rimuovere la legenda e la descrizione al passaggio del mouse? Semplicemente non riesco a capire come viene usato

Metterò le mani intorno a un jsfiddle non appena avrò tempo!

EDIT: collegamento alla documentazione: https://nnnick.github.io/Chart.js/docs-v2/#getting-started


Answer #1

Puoi cambiare le opzioni usando Chart.defaults.global nel tuo file javascript. Quindi vuoi cambiare le opzioni di legenda e tooltip.

Rimuovi legenda

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

Rimuovi descrizione comando

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

Here un violinista che lavora.


Answer #2

L'oggetto opzioni può essere aggiunto al grafico quando viene creato il nuovo oggetto Grafico.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});




chart.js2