Question

我有一个.json文件，其中包含我的图表 like this。因此，使用jQuery我从json中获取数据，如：

/* myFunctionThatLoadCharts */
$.getJSON("myfilewithcharts.json", function(data){
   var myCharts = [];
   var ctx = [];
   var typeofChart;
   var dataofChart;
   var optionsofChart;
   var dashboard = document.getElementById("dashboard");

   for (let chart in data.charts){
      var content = "<div id='"+chart+"' class='square'>"+
                       "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                     "</div>";

      dashboard.innerHTML = dashboard.innerHTML + content;
      ctx.push(document.getElementById("chart"+chart).getContext('2d'));

      typeofChart = data.charts[chart].type;
      dataofChart = data.charts[chart].data;
      optionsofChart = data.charts[chart].options;

      myCharts.push(new Chart(ctx[chart], {
         type: typeofChart,
         data: dataofChart,
         options: optionsofChart
      }));

      content = "";
      typeofChart = "";
      dataofChart = "";
      optionsofChart = "";
   }
}

哪里

数据

是$ .getJSON jQuery函数的响应。但是问题是：代码只会生成最后一个图表，而不会同时生成两个图表。

此功能是在具有<body>属性的onload标记上调用的。因此，<body onload=myFunctionThatLoadCharts()>

Answer 1

知道了！

在找到解决方案之前，我注意到尽管DOM中有绘制其他图形的元素，但是代码仅引用了最后一个。因此，我需要先为图形生成整个DOM，然后再绘制它们。

发生问题是因为“ innerHTML”命令重写了与他交互的所有DOM元素，因此我丢失了所有图表参考。

现在我有两个功能，一个用于生成DOM e，另一个用于绘制图表，像这样

/* myFunctionThatGeneratesDOMelements */
var typeofChart = [];
var dataofChart = [];
var optionsofChart = [];
var dashboard = document.getElementById("dashboard");

$.getJSON("myfilewithcharts.json", function(data){
    for (let chart in data.charts){
        var content = "<div id='"+chart+"' class='square'>"+
                        "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                      "</div>";

        dashboard.innerHTML = dashboard.innerHTML + content;

        typeofChart.push(data.charts[chart].type);
        dataofChart.push(data.charts[chart].data);
        optionsofChart.push(data.charts[chart].options);
    }
    drawCharts(typeofChart, dataofChart, optionsofChart);
});

/* myFunctionToDrawCharts */
function drawCharts (toc, doc, ooc) {
   var ctx = [];
   var myCharts = [];

   for(let i = 0; i < toc.length; i++){
       ctx.push($("#chart"+i).get(0).getContext('2d'));
       myCharts.push(new Chart(ctx[i], {
           type: toc[i],
           data: doc[i],
           options: ooc[i]
       }));
   }
}

其他解决方案是insertAdjacentHTML()和appendChild()

在loop和chart.js框架上绘制多个图表

1 个答案: