web-dev-qa-db-fra.com

Chart.js - comment tout désactiver en vol stationnaire

Comment puis-je définir le code pour qu'il n'y ait pas d'effets de survol, d'options de survol, de liens de survol, etc. sur le graphique?

J'utilise chart.js. Ci-dessous est mon code, où je mets un graphique à secteurs.

Html ..

<div id="canvas-holder" style="width:90%;">
    <canvas id="chart-area" />
</div>

..et js ...

$(document).ready(function () {


                var config = {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [60,20],
                            backgroundColor: [
                                "#ddd",
                                "#58AC1C"
                            ],

                            label: 'Dataset 1'
                        }],
                        labels: [
                            "Bla1 ",
                            "Bla2 "+
                        ]   
                    },
                    options: {
                        responsive: true
                    }
                };


                window.onload = function() {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx, config);
                };      
            });
javascriptjqueryhtmlchart.js
15
ggsplet

Tu peux essayer

 showTooltips: false

Vous pouvez également utiliser le lien suivant

http://jsfiddle.net/TZq6q/298/

3
Sanyami Vaidya

afin de supprimer tous les styles de survol/info-bulles de Vanilla chart.js:

var myChart = new Chart(canvas, {
  options: {
    tooltips: {enabled: false},
    hover: {mode: null},
  }
  ...
})

Chart.js surveille tous les événements mousemove sur le canevas dans lequel il a instancié votre graphique. Définir le survol du mode "mode" sur null semble remplacer toutes les manières utilisées par le canevas pour rechercher les éléments correspondants auxquels affecter les classes :hover Activées.

L'événement info-bulle semble séparé, j'ai donc dû utiliser les deux lignes pour rendre le graphique réellement statique.

Notez que les animations initiales fonctionnent toujours sur un graphique avec ces options.

UPDATE: le plus récent Chart.js a réorganisé la façon dont le survol est "écouté" pour:

var myChart = new Chart(canvas, {
  options: {
    events: []
  }
  ...
})

faire de l'option 'événements' une liste vide (au lieu de ['clic', 'survol', etc.]) rend le graphique 'aveugle'/statique car il n'écoutera aucun événement.

92
Megan Word

Il y a une autre option:

        states: {
            hover: {
                filter: {
                    type: 'none',
                }
            },
        },
0
dcalmeida