单击侧面按钮时显示不同的图表

Question

我是前端的新手，我创建了这样的东西：https://codepen.io/mihaela-dobre/pen/RwWGbNp我有3个侧边按钮，如果我点击它们，我会看到相同的图表显示。如何编写JS函数来显示其他内容？例如，我想在点击第二个按钮时显示这个图表：

var ctx_3 = document.getElementById('chartEight').getContext('2d');
var chartEight = new Chart(ctx_3, {
type: 'line',
data: {
labels: ['2020-03-10','2020-03-11','2020-03-12'],
datasets: [{
label: 'Trust Higher Than Eight Profit Per Day',
data: [100,800,600],
borderColor: [
'rgba(251,127,20,1)',
'rgba(251,127,20,1)',
'rgba(251,127,20,1)'
],
borderWidth: 3,
lineTension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: "#CCC", 
beginAtZero: true
},
gridLines: {
zeroLineColor: "#CCC"
}
}],
xAxes: [{
display:true,
ticks: {
fontColor: "#CCC", 
}
}]
},
legend: {
labels: {
fontSize: 20
}
},
hover: { 
mode: 'y-axis' 
},
tooltips: {
titleFontSize: 14,
bodyFontSize: 14 
}
}
});

当我点击第二个按钮，即带有K/D的按钮时，有人能帮我如何显示这个图表吗？

Answer 1

只需在表示按钮的标签上添加一个点击监听器，即可绘制新的图表：

document.getElementById("1").addEventListener('click', () => {
// ... create the new chart ...
});

此处为完整代码：https://jsfiddle.net/akmjxynq/