Suppression de la légende sur les graphiques avec chart.js v2

107

Je crée une page d'accueil en utilisant Bootstrap, JQuery et Chart.js (v2). Mon implémentation fonctionnait avec la v1, mais je suis récemment entré dans Bower et j'ai téléchargé la v2 en utilisant cela.

Je crée une grille de 4 colonnes contenant chacune un graphique à secteurs, mais la mise à l'échelle dans la v2 est un peu déroutante pour moi de travailler. Je veux que les graphiques soient réactifs afin qu'ils s'adaptent correctement aux appareils plus petits tels que les tablettes et les smartphones, et l'un de mes problèmes est de me débarrasser de la légende des graphiques ainsi que des informations de survol lorsque vous passez la souris sur les sections de mon graphique.

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

Si je supprime le champ "étiquettes" vide, le graphique ne fonctionne plus. Et par son apparence, il y a un petit espacement en haut du graphique qui pourrait indiquer que les en-têtes sont écrits, mais ce ne sont que des chaînes vides.

Quelqu'un a-t-il une idée de la façon de supprimer la légende et la description du survol? Je ne peux tout simplement pas comprendre comment cela est utilisé

Je vais mettre la main sur un jsfiddle dès que j'aurai le temps!

EDIT: Lien vers la documentation: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Zeliax
la source

Réponses:

256

L'objet d'options peut être ajouté au graphique lors de la création du nouvel objet Chart.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelDusk
la source
1
Merci beaucoup, j'utilisais react et ceci à faire de manière à réagir. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh
43

Vous pouvez modifier les options en utilisant Chart.defaults.globaldans votre fichier javascript. Vous souhaitez donc modifier les options de légende et d'info-bulle.

Supprimer la légende

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

Supprimer l'info-bulle

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

Voici un violoniste qui travaille.

cmlonder
la source
Cool. Je ne savais pas comment utiliser ces fonctions car je ne savais pas que je pouvais simplement écrire ces commandes dans mon Javascript.
Zeliax
1

Vous devez simplement ajouter cette légende de ligne: {display: false}

Marine
la source
6
en quoi cette réponse est-elle différente des autres réponses?
Shanteshwar Inde