Javascript JS初学者，坚持使用ChartJS和多种过滤器以及显示方式
在我解释我的问题之前，我只想为问题的措辞道歉，我不知道如何恰当地表达它 这是我的问题我想按周、月和年显示一张关于产品数量演变的图表。问题是：我有六种这样的产品。我脑海中唯一的解决办法就是销毁一个图表，然后为每个可能性重新创建一个。哪个。。。我打赌很糟糕。为了选择要显示的产品，我创建了一个选择框，您可以在其中选择产品。从那里，我将显示相应的chartJS。我发现“可能”的唯一解决方案是使用单选按钮，然后用开关盒验证不同的组合 有人有更可行的想法来解决这个概念的问题吗？事先非常感谢，我为我的蹩脚英语道歉 编辑：正如@AndrewL64所问，下面是我的一个代码示例，用于在单击按钮后更改图形的类型。这并不完全是我想要为最终产品做的，但它很容易显示出我遇到的问题。真是一团糟。这只适用于一个产品和三种类型的图形。我读过关于ChartJS的文章，你不能更新它的类型，你必须重新创建它Javascript JS初学者，坚持使用ChartJS和多种过滤器以及显示方式,javascript,chart.js,Javascript,Chart.js,在我解释我的问题之前，我只想为问题的措辞道歉，我不知道如何恰当地表达它 这是我的问题我想按周、月和年显示一张关于产品数量演变的图表。问题是：我有六种这样的产品。我脑海中唯一的解决办法就是销毁一个图表，然后为每个可能性重新创建一个。哪个。。。我打赌很糟糕。为了选择要显示的产品，我创建了一个选择框，您可以在其中选择产品。从那里，我将显示相应的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)'
}],
},
});
}
}
只需更改选择，该框也将更改。 如果需要更多的框，只需添加一个新的div，其中包含类框和一些id，但请注意，您还必须添加选项，并且值必须与框的id相同，才能与每个ohter相关 我希望这能有所帮助
<div class="box active" id="chartJS-1">Box 1 is here</div>
<div class="box" id="chartJS-2">Box 2 is here</div>
<div class="box" id="chartJS-3">Box 3 is here</div>
<select id="select">
<option value="chartJS-1" selected>chartJS-1</option>
<option value="chartJS-2">chartJS-2</option>
<option value="chartJS-3">chartJS-3</option>
</select>
.box {
height: 100px;
background: rgb(121, 3, 105);
color: #fff;
text-align: center;
font-size: 50px;
font-family: 'Courier New', Courier, monospace;
display: none;
}
.box.active {
display: block;
}
const select = document.querySelector('#select');
const boxes = document.querySelectorAll('.box');
select.onchange = _ => {
let value = select.value;
boxes.forEach(box => box.classList.remove('active'));
document.querySelector(`#${value}`).classList.add('active');
};
框1在这里
盒子2在这里
3号包厢在这里
chartJS-1
chartJS-2
图表JS-3
.盒子{
高度：100px；
背景：rgb（121,3105）；
颜色：#fff；
文本对齐：居中；
字体大小：50px；
字体系列：“Courier New”，Courier，monospace；
显示：无；
}
.box.active{
显示：块；
}
const select=document.querySelector（'#select'）；
const-box=document.queryselectoral（'.box'）；
select.onchange=\u=>{
让value=select.value；
forEach（box=>box.classList.remove（'active'）；
document.querySelector（`${value}`）.classList.add（'active'）；
};