如何根据条件chartjs angular隐藏特定数据集

Question

我使用chartjs插件创建了一个简单的甜甜圈图，如下图所示

现在当图表加载时，如果数据集值低于 100，它应该自动隐藏，如下所示

这是我的完整代码https://stackblitz.com/edit/ng2-charts-legend-with-value-hide

试过这段代码，取自参考https://jsfiddle.net/beaver71/00q06vjp/

pieChartData.data.forEach(function(ds) {
    ds.hidden = !ds.hidden;

还是不行，请帮我解决这个问题

Answer 1

当你设置你的数据时，你可能有这样的东西：

this.barChartData = [
    { data:[1, 2, 3], label: 'legend'}
];

您可以添加一个名为hidden的参数：

this.barChartData = [
    { data:[1, 2, 3], label: 'legend', hidden: true }
];

您可能可以预先运行测试并将结果存储在变量中，而不是“true”。

Answer 2

如果您可以从包装器访问图表对象，您可以通过这种方式隐藏数据集：

if (data < 100) {
  chartObject.getDatasetMeta(2).hidden = true
  chartObject.update()
}

但我不熟悉 ng 包装器，所以我不知道他们是否暴露了图表对象。如果不是这种情况，您可能想考虑仅使用普通库并编写自己的包装器组件。

编辑：根据这个线程可以访问图表对象（ng2-charts access base chart object）

Answer 3

在 stackBlitz 上更新你的 ngOnInit，看看这是否是你想要的

ngOnInit() {
    const othis = this;
    this.pieChartData.forEach((data, i) => {
      if (data < 100) {
        othis.pieChartData.splice(i, 1);
      }
    })
  }