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>