web-dev-qa-db-fra.com

Comment désactiver le légende du graphique js

Je voudrais désactiver chart.js Cliquez sur la légende du graphique araignée parce que lorsque je clique sur la légende, la série de données cache l'ensemble de valeurs associé, comme indiqué dans les images ci-dessous.

enter image description here

enter image description here

Mon exigence est que je ne souhaite pas désactiver l'ensemble de données. J'ai essayé le preventDefault (); sur le graphique, cliquez mais cela ne fonctionne pas.

Mon exemple de code est joint ci-dessous. Vérifiez s'il vous plaît..

<!doctype html>
<html>

<head>
    <title>Radar Chart</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <div style="width:75%">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
    };

    var config = {
        type: 'radar',
        data: {
            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
            datasets: [{
                label: "My First dataset",
                backgroundColor: "rgba(0,0,0,0.5)",
                pointBackgroundColor: "rgba(220,220,220,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },  {
                label: "My Second dataset",
                backgroundColor: "rgba(0,120,0,0.5)",
                pointBackgroundColor: "rgba(151,187,205,1)",
                hoverPointBackgroundColor: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },]
        },
        options: {
            legend: {
                position: 'top',
                onClick: (e) => e.stopPropagation()
            },
            title: {
                display: true,
                text: ''
            },
            scale: {
              reverse: false,
              gridLines: {
                color: ['black']
              },
              ticks: {
                beginAtZero: true
              }
            }
        }
    };

    window.onload = function() {
        window.myRadar = new Chart(document.getElementById("canvas"), config);
    };





    </script>
</body>

</html>
javascriptjquerychart.js
18
Preethy

Selon les documents, il existe un gestionnaire onClick pour la légende exposant l'objet événement. Si vous stopPropagation cela arrête le masquage de la série de données:

        let chart = new Chart(elem.find('canvas')[0], {
                type: 'line',
                data: {
                    labels: [],
                    datasets: []
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        onClick: (e) => e.stopPropagation()
                    }
                }
            });

Ce qui précède est ES6, si vous n'utilisez pas un navigateur pris en charge ci-dessous, c'est l'équivalent ES5 plus ancien.

legend: {
    onClick: function (e) {
        e.stopPropagation();
    }
}

Chartjs doit enregistrer son propre événement de clic après le legend.onClick c'est pourquoi cela l'empêche de s'exécuter.

documents

43
ste2425

Pour remplacer le comportement par défaut de cliquer sur un élément de légende, c'est-à-dire afficher/masquer le jeu de données associé dans le graphique, vous pouvez utiliser l'option suivante (affichée dans options pour plus de clarté):

options: {
    legend: {
        onClick: function(event, legendItem) {}
    }
}

C'est la façon de remplacer le comportement par défaut, c'est-à-dire en fournissant une fonction avec les mêmes arguments. Selon vos besoins, cette fonction doit avoir un corps vide (et donc revenir immédiatement), car absolument rien ne doit se produire lorsque vous cliquez sur un élément de légende. Chercher legend.onClick dans le docs . Bien qu'elle n'apparaisse actuellement que sous deux types de graphiques, cette option devrait fonctionner pour tous les types de graphiques.

7
xnakos

Vous pouvez également utiliser null ou toute valeur évaluée false pour désactiver l'événement de clic sur toutes les légendes.

options: {
    legend: {
        onClick: null
    }
}

Remarque: Ignorez l'événement Click par onClick sur le code suivant dans Chart.js ( https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a5945a20cf1d2cc5096728e/src/plugins/plugin.legend. js # L481 )

6
Sheile

Vous devez ajouter des propriétés legendItemClick pour remplacer l'action par défaut. C'est bon pour le graphique à secteurs

legendItemClick: function(e){
                    console.log("Clicked an item with text: " + e.text);
                    e.preventDefault();
                }

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemclick

0
user11696468