使用图表js，我有自定义图例，因为有时我有很多东西，所以我将它们放在div中，然后单击以打开。
现在，我希望仍然可以单击这些图例以将它们隐藏在图表上，就像默认图例一样。
如何在自定义图例中添加它？
记下当前代码示例：
<script>
var MainGamingMachine = document.getElementById('MainGamingMachine');
var ChartMainGamingMachine = new Chart.Line(MainGamingMachine, {
type: 'line',
data: {
labels: ['Dec-2016','Jan-2017','Feb-2017','Mar-2017','Apr-2017','May-2017','Jun-2017','Jul-2017','Aug-2017','Sep-2017','Oct-2017','Nov-2017','Dec-2017','Jan-2018','Feb-2018','Mar-2018','Apr-2018','May-2018','Jun-2018','Jul-2018'],
datasets: [{
label: 'Desktop',
fill: false,
data: [80.86,81.12,81.06,81.4,81.2,81.21,81.48,81.42,81.5,81.24,81.2,81.36,81.66,81.31,81.28,81.36,81.36,81.39,81.28,81.56],
backgroundColor: '#7ee3f7',
borderColor: '#7ee3f7',
borderWidth: 1
},{
label: 'Laptop',
fill: false,
data: [13.96,13.34,13.78,13.54,13.77,13.91,13.73,13.83,13.98,14.28,14.33,14.37,14.12,14.47,14.48,14.44,14.45,14.53,14.73,14.68],
backgroundColor: '#712718',
borderColor: '#712718',
borderWidth: 1
},{
label: 'Sofa/Console PC',
fill: false,
data: [5.18,5.54,5.16,5.07,5.03,4.88,4.79,4.75,4.52,4.48,4.47,4.27,4.22,4.22,4.24,4.21,4.19,4.08,4,3.76],
backgroundColor: '#6d7ef9',
borderColor: '#6d7ef9',
borderWidth: 1
}]
},
options: {
legend: { display: false },
legendCallback: function(chart) {
var text = [];
text.push('<div class="collapse_container"><div class="collapse_header">Click to show legend</div><div class="collapse_content"><div class="body group"><ul style="list-style: none; padding: 0; margin: 0;">');
for (var i=0; i<chart.data.datasets.length; i++) {
text.push('<li style="float: left; padding: 2px; margin: 0 7px 7px 0; line-height: 15px;">');
text.push('<div style="float: left; width: 15px; height: 15px; background-color:' + chart.data.datasets[i].borderColor + '"> </div> ' + chart.data.datasets[i].label);
text.push('</li>');
}
text.push('</ul></div></div></div>');
return text.join("");
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Percentage of users'
}
}]
},
tooltips:
{
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var label = data.datasets[tooltipItem.datasetIndex].label;
return label + ' ' + value + '%';
}
},
},
}
});
document.getElementById('MainGamingMachine-legends').innerHTML = ChartMainGamingMachine.generateLegend();
</script><script>
var MainGamepad = document.getElementById('MainGamepad');
var ChartMainGamepad = new Chart.Line(MainGamepad, {
type: 'line',
data: {
labels: ['Dec-2016','Jan-2017','Feb-2017','Mar-2017','Apr-2017','May-2017','Jun-2017','Jul-2017','Aug-2017','Sep-2017','Oct-2017','Nov-2017','Dec-2017','Jan-2018','Feb-2018','Mar-2018','Apr-2018','May-2018','Jun-2018','Jul-2018'],
datasets: [{
label: 'Steam Controller',
fill: false,
data: [36.06,38.32,36.62,36.17,35.18,34.62,33.83,33.97,33.98,33.84,33.29,33.09,32.95,32.91,33.1,33.12,33.06,33.05,33.04,32.86],
backgroundColor: '#660337',
borderColor: '#660337',
borderWidth: 1
},{
label: 'Xbox 360',
fill: false,
data: [22.51,23.36,24,23.42,22.67,22.34,23.07,22.71,23.03,22.86,22.47,22.12,21.88,21.33,21.07,20.89,20.62,20.55,20.57,20.3],
backgroundColor: '#8d2039',
borderColor: '#8d2039',
borderWidth: 1
},{
label: 'None',
fill: false,
data: [16.14,16.12,17.4,18.39,19.47,19.66,20.38,20.34,19.63,20.02,20.49,20.43,20.01,19.85,19.9,19.75,19.76,19.76,19.6,19.84],
backgroundColor: '#081eaa',
borderColor: '#081eaa',
borderWidth: 1
},{
label: 'Other',
fill: false,
data: [7.57,6.78,6.6,6.33,6.41,6.25,6.02,5.9,5.92,5.97,6.05,6.02,6.14,6.21,6.35,6.39,6.75,6.65,6.86,6.74],
backgroundColor: '#04e7a1',
borderColor: '#04e7a1',
borderWidth: 1
},{
label: 'Logitech',
fill: false,
data: [7.37,6.78,6.69,6.42,6.41,6.55,6.3,6.31,6.23,6.03,6.23,6.42,6.25,6.48,6.35,6.53,6.41,6.27,6.35,6.46],
backgroundColor: '#14e531',
borderColor: '#14e531',
borderWidth: 1
},{
label: 'PS4',
fill: false,
data: [3.98,3.86,4.21,4.34,4.61,4.84,4.74,5.02,5.16,5.31,5.47,5.51,5.92,6.37,6.29,6.49,6.51,6.65,6.4,6.37],
backgroundColor: '#3d53db',
borderColor: '#3d53db',
borderWidth: 1
},{
label: 'PS3',
fill: false,
data: [3.98,3.27,2.77,2.52,2.66,2.76,2.69,2.71,2.58,2.59,2.68,2.76,2.96,2.95,2.99,2.87,2.85,2.86,2.9,2.98],
backgroundColor: '#d23781',
borderColor: '#d23781',
borderWidth: 1
},{
label: 'Xbox One',
fill: false,
data: [2.39,1.52,1.72,2.43,2.58,2.98,2.97,3.05,3.46,3.38,3.32,3.66,3.89,3.9,3.96,3.96,4.04,4.21,4.28,4.45],
backgroundColor: '#bce2e0',
borderColor: '#bce2e0',
borderWidth: 1
}]
},
options: {
legend: { display: false },
legendCallback: function(chart) {
var text = [];
text.push('<div class="collapse_container"><div class="collapse_header">Click to show legend</div><div class="collapse_content"><div class="body group"><ul style="list-style: none; padding: 0; margin: 0;">');
for (var i=0; i<chart.data.datasets.length; i++) {
text.push('<li style="float: left; padding: 2px; margin: 0 7px 7px 0; line-height: 15px;">');
text.push('<div style="float: left; width: 15px; height: 15px; background-color:' + chart.data.datasets[i].borderColor + '"> </div> ' + chart.data.datasets[i].label);
text.push('</li>');
}
text.push('</ul></div></div></div>');
return text.join("");
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Percentage of users'
}
}]
},
tooltips:
{
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var label = data.datasets[tooltipItem.datasetIndex].label;
return label + ' ' + value + '%';
}
},
},
}
});
document.getElementById('MainGamepad-legends').innerHTML = ChartMainGamepad.generateLegend();
</script>
chart.js的文档没有提供有关如何执行常规onclick行为的实际示例，并带有自定义图例：（