masquer le jeu de données par défaut en utilisant Chart.js et un script personnalisé.

Question

J'utilise le plugin wpDataTables sur mon site Web WordPress pour dessiner quelques tableaux et graphiques. Les graphiques sont rendus à l'aide de Chart.js. Les développeurs du plugin ont créé un script personnalisé pour contrôler certains aspects supplémentaires de Chart.js que le plugin ne peut gérer en l'état.

C'est le script :

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.options.scales.yAxes[0].display = false;
        obj.options.options.scales.xAxes[0].display = false;
    }
});
</script>

Dans cet exemple, il masque les axes du graphique avec l'ID 39. J'ai besoin de modifier le script ci-dessus pour cacher un jeu de données spécifique (ligne dans le graphique) par défaut. L'ID de mon graphique est 2 et je veux masquer l'ensemble de données intitulé "SPM".

Vous pouvez jeter un coup d'œil au tableau et au graphique de la situation actuelle ici (il s'agit d'un aperçu d'armement d'un jeu, donc ne vous posez pas de questions) : https://mydivision.net/the-division-waffen/

Dans le premier graphique, tous les ensembles de données sont visibles par défaut : Je veux qu'il ressemble à ceci par défaut (ligne "SPM" cachée) :

Quelqu'un peut-il m'aider à faire cela ?

Answer 1

Ceci est tiré du ChartJS GitHub .

Vous définissez la nouvelle valeur et utilisez ensuite l'API ChartJS pour mettre à jour le graphique afin de masquer ceux que vous avez désactivés. Si vous souhaitez les réactiver, il suffit de faire l'inverse.

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=false;
chart.update();

Voici un exemple dans JSFiddle.

Answer 2

La solution est la suivante :

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[2] = function(obj){
        obj.options.data.datasets[5].hidden = true;
    }
});
</script>