どのようにあなたが以下のように<a href="http://www.chartjs.org/docs/latest/configuration/legend.html" rel="nofollow noreferrer">generate HTML legend in Chart.js</a>できChart.js

Question

でデータセットを有効または無効に生成されたHTMLの伝説を使用するには：

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を見つけることができます。