使用多JSON文件渲染CanvasJS多图表失败：第二张图表无法显示求助

你遇到的第二张图表无法渲染的问题，大概率是这几个原因导致的：

• 变量名重复覆盖：你在两个AJAX请求里都用了var chart变量，第二个请求的回调会把第一个的chart覆盖掉，导致第二个图表无法正确初始化。给两个图表分别用不同的变量名，比如chart1和chart2就行。

• 图表容器ID不匹配：检查你的HTML里有没有第二个图表对应的容器，比如第一个用了<div id="chartContainer"></div>，第二个得有<div id="chartContainer2"></div>，而且JS里初始化的时候要对应这个ID，不能和第一个重复。

• JSON数据转换遗漏：你的11.json是二维数组格式，得转换成CanvasJS需要的{ label: 月份, y: 数值 }这种对象数组。确保第二个AJAX的success回调里，也做了和第一个一样的数据转换逻辑，别漏了这一步。

举个修正后的代码片段参考：

<!-- HTML部分 -->
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>

<!-- JS部分 -->
<script>
// 第一个图表
$.getJSON("first.json", function(data) {
  var dataPoints = [];
  for (var i = 0; i < data.length; i++) {
    dataPoints.push({ label: data[i][0], y: data[i][1] });
  }
  var chart1 = new CanvasJS.Chart("chartContainer", {
    title: { text: "第一张图表" },
    data: [{ type: "column", dataPoints: dataPoints }]
  });
  chart1.render();
});

// 第二个图表
$.getJSON("11.json", function(data) {
  var dataPoints2 = [];
  for (var i = 0; i < data.length; i++) {
    dataPoints2.push({ label: data[i][0], y: data[i][1] });
  }
  var chart2 = new CanvasJS.Chart("chartContainer2", {
    title: { text: "第二张图表" },
    data: [{ type: "column", dataPoints: dataPoints2 }]
  });
  chart2.render();
});
</script>

按照这个思路调整你的代码，应该就能解决第二张图表不渲染的问题了。

内容的提问来源于stack exchange，提问作者ryan wood