jQuery Girl
  1. jQuery Girl
  3. Comment désactiver chartjs legendclick
Intereting Posts
Comment remplacer le premier élément survolé par des points de suspension «…» Bootstrap collapse data-parent ne fonctionne pas recharger un jqGrid chargé avec des données de table différentes Désactiver par programme la série sur le graphique à barres multiples horizontal nvd3 Modifier la couleur d’arrière-plan de certaines cellules de la ligne ajoutée au tableau à l’aide de JQuery Utilisez HTML5 localstorage pour conserver l’état de basculement de jQuery lors de l’actualisation de la page. Changer le type d’un champ de saisie avec jQuery (text -> password) OpenLayers 3 ne figurant pas sur un modal simple Case à cocher Tout sélectionner dans EditorFor MVC C # View Comment créer une largeur variable dans un tableau de mise en page fixe? jquery comment faire défiler le haut de la page au chargement de la page uniquement lors de l’utilisation d’tabs d’amorçage Action de clic sur DIV focalisé jQuery rapporte une hauteur d’élément incorrecte dans Firefox iframe Faire fonctionner l’enfant à partir de IE8 et moins jQuery .each () avec des éléments en entrée

Comment désactiver chartjs legendclick

Je souhaite désactiver chart.js Cliquez sur la légende du graphique Spider car lorsque je clique sur la légende, la série de données masque l’ensemble de valeurs associé, comme indiqué dans les images ci-dessous.

entrez la description de l'image ici

entrez la description de l'image ici

Mon exigence est que je ne veux pas désactiver l’dataset. J’ai essayé le preventDefault (); sur la carte cliquez mais cela ne fonctionne pas.

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

   Radar Chart     
  
  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); };

Selon la documentation, il existe un gestionnaire onClick pour la légende qui expose l’object événement. Si vous stopPropagation , la série de données sera masquée: 

  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 de navigateur pris en charge, c’est le plus ancien équivalent de ES5. 

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

Chartjs doit enregistrer son propre événement de clic après le legend.onClick raison pour laquelle il arrête son exécution.

docs

Pour remplacer le comportement par défaut consistant à cliquer sur un élément de légende, qui affiche / masque le jeu de données associé dans le graphique, vous pouvez utiliser l’option suivante (affichée dans les options pour plus de clarté): 

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

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

En outre, vous pouvez utiliser la valeur null ou une 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 de onClick sur le code suivant dans Chart.js ( https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a59cf1d2cc5096728e/src/plugins/plugin.legend.legend.js#L481 ).