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时没有删除图例项？如果我将此代码应用于条形图，则会删除所有标签，而不会出现任何问题。看来问题出在饼图中或饼图不支持删除线...？我以问题here为例。单击“切换”按钮时，统计图数据将隐藏，但不会删除任何标签。

有什么建议吗？

谢谢！

Answer 1

使用rscWeightChart.getDatasetMeta(0).data代替rscWeightChart.data.datasets。

您可以check updaeted fiddle here

Answer 2

当前，您的代码隐藏了整个数据集，而不是数据集中的每个标签。

我在下面做了一个简单的例子，并注释了代码，希望它有意义。

如果您查看documentation，将会发现需要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>

隐藏数据时删除标签

2 个答案: