我有一个数组,它包含了几个数组,我想生成几个图表,循环遍历这些数组.
<div class="container_report">
<canvas id="myChart1" ></canvas>
</div>
<div class="container_report">
<canvas id="myChart2" ></canvas>
</div>
<div class="container_report">
<canvas id="myChart3" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
allData =[{'Cartes ': 1, 'écheques ': 1, 'Dominos': 3, 'Dames ': 1, 'qst': 'Quelles jeux préférez vous le plus ?'},
{'En solo': 1, 'Avec des amies ': 4, 'En ligne ': 1, 'qst': 'Comment aimez vous jouer ?'},
{'Le sport': 2, 'Voir la télé': 3, 'Passer du temps avec vos proches': 1, 'La lecture ': 0, 'qst': 'Quelles activité vous pratiquez en sortant du travaille ?'}
]
var allValues =[]
var xValue = []
var yValue = []
var allxValue = []
var allyValue = []
for (let i = 0; i < allData.length; i++){
xValue = []
yValue = []
for (const property in allData[i]) {
if(property != 'qst'){
xValue.push(property)
}
if(!isNaN(allData[i][property])){
yValue.push(allData[i][property])
}
}
allxValue.push(xValue)
allyValue.push(yValue)
}
var ctxs = document.querySelectorAll('canvas');
for(let i = 0; i <= ctxs.length;i++){
console.log(ctxs[i].id)
for(let z = 0; z < allxValue.length; z++){
for(let y = 0; y < allyValue.length; y++){
var idiv = document.querySelector('#'+ctxs[i].id).getContext('2d');
const chart = new Chart(ctxs[i].id, {
type: "doughnut",
data: {
labels: allxValue[z],
datasets: [{
data: allyValue[y]
}]
},
options: {}
});
}
}
}
</script>
但我得到这个错误在控制台:
未捕获的错误:画布已在使用中。必须先销毁ID为"0"的图表,然后才能重新使用ID为"myChart1"的画布。在new Mn
1条答案
按热度按时间a64a0gku1#
看起来您在尝试使用相同的ID创建多个图表时遇到了错误。您是否可以尝试通过使用索引为每个图表创建唯一ID来修改循环:
这将创建ID为
myChart1
、myChart2
和myChart3
的图表,这将修复您看到的错误。希望这能有所帮助!