google.visualization.arrayToDataTable is not a function 에러

All We Need is Data, itself !·2022년 8월 15일
0
post-thumbnail

최근에 벨로그 포스팅을 너무 못했음
진짜 너무 바쁨 ㅠ
그래서 뭐라도 적어야겠다 싶은 마음에 일단 이거라도 적어봄
(스터디 다시 구해야겠다...)



구글 차트를 그리다 보면 가끔 저런 에러가 뜰 떄가 있음

google.visualization.arrayToDataTable is not a function

서칭해보니

< script type="text/javascript" src="https://www.google.com/jsapi?autoload= {'modules':[{'name':'visualization','version':'1.1','packages': ['corechart']}]}"></ script>

를 넣던가 아니면 (아니 벨로그 이스케이프 어떻게 했더라)

google.load("visualization", "1", {packages:["corechart"]});

로 직접 선언해주라구 함
나의 경우에는 둘 다 안통했음

그리고 나서는

$(window).on('load',function () {});

와 packages:["coreheart"] 지정 로드를 사용하라는 솔루션을 보았음
그래서 사용하니까 잘 됨.

근데 왜 되는지가 궁금함

일단, $(document) 로 구글 차트를 init 해주었을 때는 브라우저가 dom 트리를 형성하자마자 바로 로드됨
그러니까 페이지 전체가 로드되고 나서 실행되는 게 아니라 먼저 되면 먼저 실행해준다는 특징이 있다고 함

JS에서 전역 객체 window 하위에 있는 객체가 domcument 라고 함. (스코프 공부할 때 겁나 열심히 했지)

아무튼, 이 dom은 getElementById 등과 같은 것들을 제공함 (많이 쓰는데 깊게는 잘 몰랐음 ㅠ)

ref: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

dom 과 관련된 아주 좋은 레퍼런스를 가져와봄

https://dom.spec.whatwg.org/#concept-document


아무튼, 그에 반해 $(window).load는 css, js, image 등 화면에 필요한 요소들이 모두 로드된 후 실행된다고 함. (html의 로드가 끝난 후 시작)

그러니까 요는,
구글 차트가 다 로드되지 않은 상태에서 실행을 하려고 했기 때문에 arrayToDataTable이라는 function을 찾을 수 없었던 것
순서까지 잘 알고있어야 했던 것이었다 ^ㅠ 근데 내가 한가지 간과한 게 있었음.

$(document).ready()google.charts.setOnLoadCallback(init);을 올려주면 되는 것이었음,,

이렇게도 콜백할 수 있음 . 그러나 아무튼 load를 하고 나서 callback 함수를 부르는 거니까 load가 될 것임.

중요한 것은 init 또는 drawChart 함수는 반드시 이전에 그려져 있어야 한다는 것.

고로 $(document)로 init 함수를 그려놓고 setOnLoadCallback해서 부르면 잘 로드됨.

별거아닌데 그냥 적어야겠다 싶었다고 함. 감사합니다

profile
우당탕탕 데린이 흑역사 생성중

0개의 댓글