JS的初学者，被ChartJS和多个过滤器和显示方式所卡住

Question

在我解释我的问题之前，我只想对问题的措词表示歉意，我不知道如何正确地措辞。

这是我的问题。 我想按周，月和年显示有关产品数量变化的chartJS。]问题是：我有6种这样的产品。我心中唯一的解决方案是销毁图表并为每种可能性重新创建一个。我敢打赌... [[糟糕。为了选择要显示的产品，我创建了一个SelectBox，您可以在其中选择产品。从那里，我想显示相应的chartJS。我发现“可能”的唯一解决方案是使用RadioButtons，然后使用开关柜验证不同的组合。 有人对解决这个问题有更可行的想法吗？提前非常感谢，对于我的英语不好，我深表歉意。

编辑：@ AndrewL64询问，这是我的代码示例，用于单击按钮后更改图形的类型。这并不是我最终产品要做的，但是很容易显示出我遇到的问题。真是一团糟。这仅适用于一种产品和三种类型的图形。我已经了解过ChartJS，您无法更新其类型，而必须重新创建它。

function changeGraphType(type){
var gradctx =  document.getElementById('myChart').getContext("2d");

let gradient = gradctx.createLinearGradient(0, 0, 0, 600);
var ctx = document.getElementById('myChart');

//gradient bar & line
gradient.addColorStop(0, 'orange');
gradient.addColorStop(1, 'purple');


graphique.destroy();

if(type==='pie'){
    graphique = new Chart(ctx.getContext('2d'), {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: 'Ceci est un test',
                data: donnee,

                backgroundColor: gradient,  //['#FF3254','#85ff2d','#ffdb0f','#FF3254','#FF3254','#FF3254','#FF3254','#FF3254','#FF3254'],
                hoverBackgroundColor:'rgb(252,10,19)'
            }],
        },
    });
}
else if(type==='line'){
graphique = new Chart(ctx.getContext('2d'), {
    type: type,
    data: {
        labels: labels,
        datasets: [{
            label: 'Grillage blindax',
            data: donnee,

            backgroundColor:gradient,
        }],
    },
});
}
else{
    graphique = new Chart(ctx.getContext('2d'), {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: 'Test',
                data: donnee,

                backgroundColor:gradient,
                hoverBackgroundColor:'rgb(64,252,52)'
            }],
        },
    });
}

}

在我解释我的问题之前，我只想对问题的措词表示歉意，我不知道如何正确地措辞。这是我的问题。我想显示一个关于...

Answer 1

只需更改

select