web-dev-qa-db-fra.com

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

Je fais une page d'accueil en utilisant, Bootstrap, JQuery et Chart.js (v2). Mon implémentation fonctionnait sous v1, mais je viens tout juste d’entrer dans Bower et de télécharger v2 avec cela.

Je crée une grille de 4 colonnes contenant chacune un graphique à secteurs, mais la mise à l'échelle de la v2 est un peu déroutante pour moi. Je souhaite que les graphiques soient réactifs afin de s'adapter correctement aux appareils plus petits, tels que les tablettes et les smartphones, et l'un de mes problèmes est de se débarrasser de la légende des graphiques ainsi que des informations de survol lorsque vous survolez la souris avec la souris. 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 à en juger par son apparence, il y a un petit espacement en haut du graphique qui pourrait indiquer que les en-têtes sont écrits, mais il ne s'agit que de chaînes vides.

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

Je vais mettre mes mains autour d'un jsfiddle dès que j'aurai le temps!

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

javascriptjquerycsschartschart.js2
85
Zeliax

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

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

Vous pouvez modifier les options en utilisant Chart.defaults.global dans votre fichier javascript. Vous souhaitez donc modifier les options de légende et d’infobulle.

Supprimer la légende

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

Supprimer l'info-bulle

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

Ici est un violoniste en activité.

40
cmlonder