隱藏數據時Strikethough標簽

Question

我有以下代碼：

app.drawRSCWeightCharts = function() {
var ctx = document.getElementsByClassName('rscWeightChart');
var Charts = [];

if (ctx.length > 0) {
    for (i = 0; i < ctx.length; i++) {
        var id = ctx[i].getAttribute('id');
        var rscWeightChart = new Chart(ctx[i], {
            type: 'pie',
            fill: true,
            data: eval(id + 'Data'),
            options: {
                animation: {
                    animateScale: true
                },
                legend: {
                    position: 'bottom'
                }
            }
        });
        rscWeightChart.resize();
        Charts.push(rscWeightChart);
    }
    $('.toggleLegend').click(function (button) {
        if (button.target.id.substr(0, 6) !== 'toggle') {
            button.preventDefault();
            return false;
        } else {
            button.preventDefault();
            var button_id = button.target.id;
            button_id = button_id.replace(/\D/g, '');

            Charts.forEach(function (c) {
                if (('rscWeightChart' + button_id) === c.chart.canvas.id) {
                    c.data.datasets.forEach(function(ds) {
                        ds.hidden = !ds.hidden;
                    });
                    c.update();
                }
            });
        }
    });
}

單擊按鈕時，此代碼會隱藏餅圖中的所有數據。 遺憾的是，圖例中的項目沒有應用刪除線。 隱藏數據集時，默認情況下不會發生這種情況嗎？ 我試圖在c.update（）函數之前使用以下代碼隱藏legenItems：

c.legend.legendItems.forEach(function (li) {
                        li.hidden = !li.hidden;
                    });

這沒用。 任何人都知道為什么當數據集設置為hidden = true時，圖例項目沒有被打破？ 如果我將此代碼應用於條形圖，則標簽會毫無問題地打印出來。 看起來問題出現在餅圖中，或餅圖不支持刪除線......？ 我在這里舉了一個問題的例子。 單擊“切換”按鈕時，圖表數據將被隱藏，但不會打印任何標簽。

有什么建議？

提前致謝！

Answer 1

使用rscWeightChart.getDatasetMeta(0).data而不是rscWeightChart.data.datasets 。

你可以在這里查看更新的小提琴

Answer 2

目前，您的代碼隱藏了整個數據集，而不是數據集中的每個標簽。

我在下面做了一個簡單的例子並對代碼進行了評論，我希望它有意義。

如果查看文檔，您將看到需要getdatasetmeta()才能從對象內部獲取元數據。

查找與當前索引匹配的數據集並返回該元數據。 此返回的數據包含用於構建圖表的所有元數據。

 let rscWeightChart = new Chart($('.rscWeightChart'), { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ data: [12, 19, 3, 5, 2, 3], hidden: false }] } }); for (let data of rscWeightChart.data.datasets) { /* setting this to false will hide the entire chart, but each label will not know that it is hidden */ console.log(`Entire chart: ${data.hidden}`); } for (let data of rscWeightChart.getDatasetMeta(0).data) { /* setting this to false will hide each label, this will lead to each label gaining a strikethrough */ console.log(`Each label: ${data.hidden}`); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <canvas class="rscWeightChart"></canvas>