web-dev-qa-db-fra.com

Est-il possible dans chartjs de masquer certaines légendes de jeu de données?

Est-il possible de masquer uniquement certaines légendes de jeu de données dans chartjs? Je sais qu'il est possible de tout cacher avec

options: {
    legend: {
        display: false
chart.jslegend
15
Kevin Lindmark

Réponse courte: Oui, c'est possible. Malheureusement, ce n'est pas aussi simple que les développeurs pourraient le faire.

Si vous savez quelle est la valeur text de l'élément affiché dans la légende, vous pouvez filtrer cela. Après avoir lu les documents Chart.js, j'ai trouvé la section Legend Label Configuration qui détaille une fonction filter qui peut être utilisée pour "filtrer les éléments de légende", bien que cette fonction doive être défini sur l'objet d'options du graphique parent, pas en tant qu'option sur l'ensemble de données lui-même:

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            labels: {
                filter: function(item, chart) {
                    // Logic to remove a particular legend item goes here
                    return !item.text.includes('label to remove');
                }
            }
        }
    }
});

Maintenant, il apparaît à chaque fois que les données changent et que le graphique est mis à jour via chart.update() cette fonction de filtre est appelée.

Pour plus de commodité, j'ai mis cela en place dans un jsfiddle pour que vous puissiez jouer avec.

Remarque: Cette solution a été conçue autour de l'API pour la version 2.7.1 de ChartJS. Les versions futures pourraient améliorer le contrôle des étiquettes de légende des jeux de données.

28
Luke Stoward