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

Question

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

未在documentation中找到它的选项。

Answer 1

是的，有一个＆＃34;隐藏＆＃34; ChartJS中的标志。 例如

mvn clean verify -Dtest.email="myemail@yahoo.com" -Dtest.password="pass\$word\$"

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

Answer 2

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

最好在dataSet的当前元数据中进行更改，该元数据保存图表所使用的实际数据：

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

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

this.chart.update();

Answer 3

如果您使用的是 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,
    }];
  });