구글 차트 툴팁 깜박임 현상

차트는 막대랑 꺾은 선 밖에 안 써봤는데 

도넛(원) 차트를 만들어 볼 기회가 있어서 만들어 보았다. 

만드는 건 문제가 아니었는데 막대랑 꺾은 선과 다르게 도넛 차트에서는 차트 영역에 툴팁이 노출되는데 

커서를 툴팁 위에 대면 툴팁이 미친듯이 깜박인다. 

 

여기 저기 찾아봤더니 이미 많은 사람들이 고통받고 있는 문제였다.

그 중 참고한 사이트는 아래 2개이다. (두번째 사이트가 더 도움이 되었다.)

https://stackoverflow.com/questions/37902708/google-charts-tooltip-flickering

https://github.com/google/google-visualization-issues/issues/2162

 

제시된 방법들을 정리해 보면 다음과 같다. 

 

1) 버전에 'current' 대신에 '42'를 넣는다. 

google.charts.load('current', {'packages':['corechart']});
                    ↓
google.charts.load('42', {'packages':['corechart']});

 

: 이 방법은 처음에 로딩할 때 그래프가 안 나오는 경우가 있다. 

  새로고침하면 그래프가 제대로 나오기는 하는데 안 나오는 경우에 대한 대책이 없는 듯.

 

2) CSS로 조정한다.

svg > g > g:last-child { pointer-events: none }

svg > g:last-child > g:last-child { pointer-events: none }

svg > g > g.google-visualization-tooltip { pointer-events: none }

div.google-visualization-tooltip { pointer-events: none }

.google-visualization-tooltip { pointer-events:none; }

 

: 댓글들을 보면 어떤 사람에게는 되고, 어떤 사람에게는 안되고... 경우에 따라 다른 건가 하는 생각이 든다. 

  위의 것들을 다 해 봤는데 나의 경우에는 맨 마지막 코드를 적용했을 때 깜박임이 없어졌다. 

 

 

구글에서 얼른 고쳤으면 좋겠다 ㅠㅠ

무료라고 일부러 그렇게 만든 건 아니겠지...