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

— Zeliax
source

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
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
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
source

6

en quoi cette réponse est-elle différente des autres réponses?

— Shanteshwar Inde

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

index.html

functions.js

Supprimer la légende

Supprimer l'info-bulle