본문 바로가기
JS,HTML,CSS

echarts 3D Bar with Dataset 그래프 새로고침 이슈

by 유반짝 2023. 12. 29.

https://this-is-coding.tistory.com/46 참고

 

그래프를 선택하지 않으면 새로고침가능하나 그래프에 마우스오버를 하면

검색조건을 변경하여 새로 검색했을때 이전 그래프 데이터 그대로 보이는 믄제발생

캔버스요소 삭제하고 재생성을 참조하여 chartClear() 함수에 인스턴스 속성을 강제로 비워주고 나서 해결

 

	function chartClear() {
	
	var chartDom = document.getElementById("main_chart");
	var myChart = echarts.init(chartDom);
	var chartDom2 = document.getElementById("main_chart2");
	var myChart2 = echarts.init(chartDom2);
	var chartDom3 = document.getElementById("main_chart3");
	var myChart3 = echarts.init(chartDom3);
	var chartDom4 = document.getElementById("main_chart4");
	var myChart4 = echarts.init(chartDom4);
	
	myChart.clear();
	myChart2.clear();
	myChart3.clear();
	myChart4.clear();
	
	// echarts안의 _echarts_instance_를 비워줘야 그래프가 초기화
	$('#main_chart').attr('_echarts_instance_', "");
	$('#main_chart2').attr('_echarts_instance_', "");
	$('#main_chart3').attr('_echarts_instance_', "");
	$('#main_chart4').attr('_echarts_instance_', "");
}