Chart.js - 如何在加载时将折线图数据集设置为禁用

Posted 2023-02-16

【中文标题】Chart.js - 如何在加载时将折线图数据集设置为禁用

【英文标题】：Chart.js - How to set a line chart dataset as disabled on load

【发布时间】：2016-08-19 04:11:51

【问题描述】：

使用 chart.js v2，是否可以将折线图中的数据集标记为在初始加载时被禁用？

在documentation 中没有找到它的选项。

【问题讨论】：

我认为不存在这样的选择。您应该删除“已禁用”数据集并在图例中手动添加一个条目。

@bviale 好的，谢谢，怀疑是这样。

【参考方案1】：

公认的解决方案有一个缺点，即在像这样初始化图表后隐藏/取消隐藏信号有时可能会失败。

在数据集的当前元数据中更改它可能是一个更好的主意，其中包含图表使用的实际数据：

chart.data.datasets.forEach((dataSet, i) => 
  var meta = chart.getDatasetMeta(i);

  meta.hidden = (<your-condition-here>);
);

this.chart.update();

【讨论】：

此解决方案非常适合更新数据和/或如果您想动态更改“隐藏”属性。谢谢。

【参考方案2】：

如果您使用的是angular-chartjs，那么您可以在chart-dataset-override 属性中添加数据集的属性：

例如：

HTML：

<div class="container" ng-app="app" ng-controller="ChartCtrl">
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" chart-dataset-override="datasetOverride">
  </canvas>
</div>

Javascript：

Chart.defaults.global.legend.display = true;

angular.module("app", ["chart.js"])
  .controller("ChartCtrl", function($scope) 

    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];

    $scope.datasetOverride = [, 
      hidden: true,
    ];
  );

【参考方案3】：

是的，ChartJS 中有一个“隐藏”标志。 例如。

data:

        datasets: [
        
            data: [1,2,3],
            label: 'My First Dataset',
            hidden: true,
        ,
        ],

在 GitHub 上查看此问题：https://github.com/chartjs/Chart.js/issues/689

【讨论】：

3 年后还是 hidden，但它仍然不在文档中