CanvasJS Dynamic Div

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（）与“类型错误：无法读取属性未定义的‘风格’。”

任何帮助，将不胜感激。

Answer 1

是的，你可以将动态创建DIV以图表。请参考这个例子。

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

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

 

 
function assignDiv(options){ 
 
\t if(!options.chartContainer){ 
 
\t \t 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>