默认情况下使用Chart.js和自定义脚本隐藏数据集

Question

我在我的WordPress网站上使用wpDataTables插件来绘制一些表格和图表。图表使用Chart.js呈现。该插件的开发人员创建了一个自定义脚本来控制Chart.js的更多方面，而不是插件可以开箱即用。

这是脚本：

<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>

在此示例中，它使用ID 39隐藏图表的轴。我需要更改上面的脚本以隐藏特定数据集（图表中的行）。我的图表ID是2，我想隐藏标有“SPM”的数据集。

你可以看一下表格和图表，看看它现在的样子（这是一个游戏的武器概述，所以请不要怀疑）：https://mydivision.net/the-division-waffen/

第一个图表默认显示所有数据集：我希望默认情况下它看起来像这样（隐藏“SPM”行）：

任何人都可以协助如何做到这一点？

Answer 1

这取自ChartJS GitHub。

您设置新值，然后使用ChartJS API更新图表以隐藏您已切换的图表。如果你想再次切换它们，你只需反过来。

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

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

这是JSFiddle.的一个例子

Answer 2

解决方案是：

<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>