2015-02-01 4 views
1

나는 시간 간격에 따라 도착하는 동적 데이터를 표시하는 Charts.js Doughnut chart을 사용하고 있습니다.
시간 간격을 취소하거나 페이지를 새로 고침 할 때! 그것을 잘 보이는 :Charts.js 도넛

enter image description here

나는 시간 간격으로 있음을 갱신하고 마우스로 가서 때 각각의 호출에 또 다른 레이어를 그릴 것으로 보인다.

enter image description here

는 이미 한 번 그릴 제거하고 새로운 데이터를 설정하려고했으나 여전히 마우스 오버에 미쳐 간다.
var canvas = document.getElementById('modular-doughnut'); 
var context = canvas.getContext('2d'); 
context.clearRect (0 , 0 , canvas.width, canvas.height); 
var moduleDoughnut = new Chart(context).Doughnut(chart_data, config); 

는 편집 : @Koogle에 덕분에 나는 문제가 툴팁에 있다고 말할 수있다.

어떻게 해결할 수 있습니까?

+0

chart.js가 html 캔버스를 사용하기 때문에 다시 그리기 전에 캔버스를 지워야한다고 생각합니다. – Koogle

+0

예를 보여 줄 수 있습니까? – NickF

+0

샘플 데이터로 jsfiddle을 설정할 수 있습니까? – Koogle

답변

0

동일한 캔버스를 사용하려면 참조를 지워야합니다. Charts.js는 .destroy()를 사용하여 캔버스에 대한 모든 참조를 지워야한다고 말합니다.

당신은 여기에 대해 읽어 :

Charts.js .destroy() 나는 내가 쉽게 그냥 캔버스 주위 사업부를 만들 JQuery와 $를 사용하여 DIV를 취소하는 것으로 이렇게 만들어진 일부 동적 차트에서 동일한 문제가 있었다 ("#을 divID "). empty()를 추가 한 다음 새 캔버스를 추가하십시오.