时间戳

首页 > 解决方案 > 单击侧边按钮时显示不同的图表

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

问题描述

我是前端新手，我创建了这样的东西：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 的按钮）时，谁能帮助我如何使该图表出现？

标签： javascripthtml

解决方案

只需在代表按钮的标签上添加一个 click-listener 并绘制新图表：

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

完整代码在这里：https ://jsfiddle.net/akmjxynq/

推荐阅读