javascript 用forloop生成多图表

4urapxun  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(136)

我有一个数组,它包含了几个数组,我想生成几个图表,循环遍历这些数组.

<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

a64a0gku

a64a0gku1#

看起来您在尝试使用相同的ID创建多个图表时遇到了错误。您是否可以尝试通过使用索引为每个图表创建唯一ID来修改循环:

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('#myChart' + (i + 1)).getContext('2d');
          const chart = new Chart('myChart' + (i + 1), {
            type: "doughnut",
            data: {
              labels: allxValue[z],
              datasets: [{   
                data: allyValue[y]
              }]
            },
            options: {}
          });     
        }
      }
    }

这将创建ID为myChart1myChart2myChart3的图表,这将修复您看到的错误。
希望这能有所帮助!

相关问题