차트 초기화가 제대로 작동하지 않습니다.

Question

고유 한 ID를 사용하여 버튼의 클릭 이벤트에 동적으로 DIV 태그를 추가하고 있습니다.

jquery : - res = 1,2,3 ... for 루프 변수 값.

chartname='chart'+res; 
myVarchart = setTimeout(function(){chartinit(chartname)}, 200); 

HTML - DIV 태그

<div id="chart'+res+'" style="height:200px;width:400px;"> </div> 

수단 ID가 루프 변수 값에 따라 ... chart1,2,3한다.

그러나 차트는 마지막 2 - 3divs에 대해서만 표시됩니다. echart 라이브러리에 의한 초기화 시간 문제. 극복하는 방법 ??

Answer 1

나는 angular29s와 echarts를 사용하여 echarts을 통해 동적 차트를 만들었습니다. $scope.widgets은 차트 옵션, ID 및 해당 색인을 포함하는 개체의 배열입니다.

는 또한 resize 이벤트마다 div https://github.com/sdecima/javascript-detect-element-resize

$scope.widgets.map(function(widget) { 
     $timeout(function() { 
      let chart2 = echarts.init(document.getElementById('widget_id_'+widget.index+'_'+ widget.elements.chart.id)); 
      let resizeElement = document.getElementById('widget_id_'+widget.index+'_'+ widget.elements.chart.id), 
      resizeCallback = function() { 
       chart2.resize(); 
      }; 
      addResizeListener(resizeElement, resizeCallback); 
     }, 600) 
    });