如何使用生成的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。