Question

我正在使用JavaScript，根据来自ajax调用的响应数据，使用 chartJS 创建饼图。 Ajax成功响应具有一个字典对象。在答复中，我试图为要使用switch处理的特定关键项目创建饼图。在switch内部，我正在处理labels和data的数据列表，这些数据列表将用于创建饼图并传递给createSubDashboards函数，该函数将创建我需要的饼图（{canvas个元素）。我在这里面临问题。我得到了div元素，但是在canvas中仅打印了最后一个饼图，而忽略了之前的饼图。

有人可以让我知道我在想什么，这里发生了什么事。

function load(obj=undefined,change=false) {
  $.ajax({
      method: "GET",
      url: endpoint,
      success: function(data){
          processChartData(data);
      },
      error: function(data){
          console.log(data);
      }
  })
}

function processChartData(data){
    console.log(data)
    for (var key in data){
        if (data.hasOwnProperty(key)){
            switch (key){
                case "asd":
                case "qwe":
                case "zxc":
                {
                    //To Create List of Lables and Data
                    for (var i=0; i < data[key].length; i++) {
                        sub_data = data[key][i]
                        var key_list = [], value_list = []
                        for (var sub_key in sub_data)
                        {
                            key_list.push(sub_key)
                            value_list.push(sub_data[sub_key])
                        }
                        createSubDashboards(key, key_list, value_list)
                    }
                    break;
                }
            }
        }
    }
    console.log(data)
}

function createSubDashboards(folder, key_list, value_list){
    var str = ''
    str= str
      +'<div class="col-xl-4 col-lg-5">'
      +'    <div class="card shadow mb-4">'
      +'        <!-- Card Header - Dropdown -->'
      +'        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">'
      +'          <h6 class="m-0 font-weight-bold text-primary">Execution Overview</h6>'
      +'        </div>'
      +'        <!-- Card Body -->'
      +'        <div class="card-body">'
      +'          <div class="chart-pie pt-0 pb-0">'
      +'              <canvas id="myPieChart'+ folder +'"></canvas>'
      +'          </div>'
      +'        </div>'
      +'    </div>'
      +'</div>'
    document.getElementById("Third Level Chart - L3").innerHTML += str
    myPieChart = new Chart(document.getElementById("myPieChart" + folder), {
        type: 'doughnut',
        data: {
            labels: key_list,
            datasets: [{
                data: value_list,
                backgroundColor: ['#1cc88a','#36b9cc','#d9534f'],
                //hoverBackgroundColor: [ '#17a673','#2e59d9','#2c9faf'],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
                hoverBorderWidth: 5
            }],
        },
        options: {
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            cutoutPercentage: 33,
        },
    });
}

Sample Screenshot

示例：

如果仅匹配1个元素并且正在生成饼图，则它可以正常工作。
如果两个元素都匹配并且两者都应生成饼图，则仅为第二个元素饼图生成，而对于第一个元素仅存在div和canvas标签。

使用javascript和chartJS动态创建图表时，仅生成最后一个图表

0 个答案: