如何使用生成的HTML图例在Chart.js中启用或禁用数据集

Question

您可以generate HTML legend in Chart.js如下：

var myChart = new Chart(ctx, {...});
myChart.generateLegend();

但是，您无法单击图例来启用或禁用数据集。请参阅this exmaple in jsfiddle。

有没有什么好方法可以通过点击生成的HTML图例来切换（即启用或禁用）数据集？

Answer 1

您实际上可以使用the getDatasetMeta API来实现它，如下所示：

$('#js-legend').click(function(e) {
  var targetLi = $(e.target).closest('li');
  targetLi.toggleClass('inactive');

  if (targetLi.hasClass('inactive')) {
      myChart.getDatasetMeta(targetLi.index()).hidden=true;
  } else {
    myChart.getDatasetMeta(targetLi.index()).hidden=false;
  }    
    myChart.update();
});

您可以找到the example on jsfiddle。