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で失敗）と「例外TypeError：未定義のプロパティ 『スタイル』を読み取ることができません」私たちの現在のコードは次のようなものです。

ご協力いただければ幸いです。

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>