Graphique js afficher/masquer la légende pendant l'exécution via buttonClick

Question

Bonjour je veux afficher/masquer la légende de mon linechart (chart.js) en cliquant sur un bouton.

J'ai essayé jusqu'à présent:

Le code suivant modifie la valeur de scatterChart.legend.options.display mais après l'exécution scatterChart.update() la valeur change automatiquement à la valeur initiale!

function showHideLegend() { 
    console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true 
    if (scatterChart.legend.options.display == true) { 
     scatterChart.legend.options.display = false; 
    } else { 
     scatterChart.legend.options.display = true; 
    } 
    console.log(scatterChart.legend.options.display); // -> value successfully changed e.g.: false 
    scatterChart.update(); 
    //Chart.defaults.global.legend.display = false;  // <- does not have an effect 
    console.log(scatterChart.legend.options.display); // -> "inital-value" e.g.: true 
} 

function initMap() { 
    scatterChart = new Chart(document.getElementById("scatterChart"), { 
     type: 'line', 
     data: { 
      /*datasets: [ 
      ] 
      */ 
     }, 
     showScale: false, 
     options: { 
      legend: { 
       position: 'right', 
       labels: { 
        fontSize: 15 
       } 
      } 
     } 
    }); 

HTML

<canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('image.jpg'); background-size: 100% 100%;"></canvas> 
<div id="scatterLegend"> //howToPutLegendHere??// </div> 
<input type="button" value="Show/Hide Legend" onclick="showHideLegend()"> 

Answer 1

Il semble que vous essayiez juste de mettre à jour la mauvaise configuration de légende dans l'objet d'instance chart.js. Voici la bonne façon.

document.getElementById('hideLEgend').addEventListener('click', function() { 
    // toggle visibility of legend 
    myLine.options.legend.display = !myLine.options.legend.display; 
    myLine.update(); 
}); 

La seule chose que vous essayez de mettre à jour (par exemple chart.legend.options) est juste l'objet de configuration de légende par défaut. Ceci est fusionné avec toutes les options que vous définissez dans la configuration options.legend de votre graphique.

Voici un codepen example montrant le comportement d'affichage/masquage de légende à partir d'un clic de bouton.

Vous pouvez également choisir de ne pas utiliser la légende intégrée et de générer votre légende en tant que code HTML/CSS pur n'importe où sur votre page, puis utiliser jQuery (ou javascript standard) pour afficher et masquer. Je ne vais pas donner d'exemple pour l'exposition/la dissimulation (voir jQuery's show/hide functions) mais je vais montrer comment générer une légende personnalisée. Vous devez d'abord utiliser l'option options.legendCallback pour créer une fonction qui génère la légende personnalisée.

options: { 
    legend: { 
    display: false, 
    position: 'bottom' 
    }, 
    legendCallback: function(chart) { 
    var text = []; 
    text.push('<ul class="' + chart.id + '-legend">'); 
    for (var i = 0; i < chart.data.datasets.length; i++) { 
    text.push('<li><div class="legendValue"><span style="background-color:' + chart.data.datasets[i].backgroundColor + '">&nbsp;&nbsp;&nbsp;&nbsp;</span>'); 

    if (chart.data.datasets[i].label) { 
     text.push('<span class="label">' + chart.data.datasets[i].label + '</span>'); 
    } 

    text.push('</div></li><div class="clear"></div>'); 
    } 

    text.push('</ul>'); 

    return text.join(''); 
    } 
} 

utilise alors la méthode de prototype .generateLegend() pour générer le modèle (qui exécute la fonction legendCallback défini ci-dessus) et l'insérer dans le DOM.

$('#legend').prepend(mybarChart.generateLegend()); 

Voici une codepen example qui démontre l'approche de la légende personnalisée. Vous pouvez modifier la fonction legendCallback pour utiliser le code HTML que vous voulez pour la structure de la légende, puis utiliser le style CSS standard pour le styler. Et enfin, utilisez javascript pour l'afficher/masquer sur le bouton cliquer.

Answer 2

Avez-vous essayé de le mettre dans un div et cacher/montrer avec CSS? il sera présent mais caché et update() apportera des modifications aux données existantes alors quand vous le voulez, supprimez simplement la classe "hidden".