CanvasJS动态分区

Question

当我使用CanvasJS时，出现了一个问题。在创建图表之前，似乎需要呈现图表所在的div。

当我的函数返回图表时，我希望将所需的图表div添加到正文中，然后呈现图表，有什么方法可以解决这个问题吗？我们当前的代码是这样的：

charts(limit).then(function(res) {
  for (key in res) {
    var thiselem = document.getElementById(res[key].options.chart.container);
    if(!thiselem) {
      thiselem = document.createElement("div");
      thiselem.id = res[key].options.chart.container;
      thiselem.style.height = "33vH";
      thiselem.style.width = "100%";
      document.body.appendChild(thiselem);
    }
    res[key].render();
  }
}, function(err){console.error(err);});

但是，它在第一次.render()时失败，并显示"TypeError: Cannot read property 'style‘of undefined“。

任何帮助都将不胜感激。

Answer 1

是的，您可以将动态创建的DIV分配给图表。请参考此示例。

​

var chartsOptions = [{        
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
},{        
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	}					
	]
}];

var charts = [];
for(var i in  chartsOptions){
	charts[i] = new CanvasJS.Chart(assignDiv(chartsOptions[i]), chartsOptions[i]);
	charts[i].render();
}


function assignDiv(options){
	if(!options.chartContainer){
		var thiselem = document.createElement("div");
      thiselem.id = "ChartContainer" + (charts.length + 1);
      thiselem.style.height = "33vH";
      thiselem.style.width = "100%";
      document.body.appendChild(thiselem);
      options.chartContainer = thiselem.id;
   }
   return options.chartContainer;
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

​