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>