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

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/