시각화 코드 작성
Looker Studio 도우미 라이브러리는 사용자와 Looker Studio 간의 인터페이스를 제공합니다. 라이브러리를 사용하려면 시각화를 렌더링하는 콜백 함수를 제공하세요.
라이브러리에서 가장 눈에 띄는 함수는 subscribeToData입니다. 이 함수는 시각화를 렌더링하는 callback 함수와 데이터에 적용할 변환 종류를 지정하는 options 객체라는 두 가지 인수를 사용합니다. 자세한 내용은 라이브러리 참조를 확인하세요.
다음은 시각화 JavaScript의 모양을 보여주는 개요입니다.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
커뮤니티 시각화 자료를 작성할 때는 몇 가지 중요한 사항을 염두에 두어야 합니다.
subscribeToData 함수의 업데이트는 데이터, 스타일 또는 iframe 크기가 변경될 때 발생합니다.
예를 들면 다음과 같습니다.
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Looker Studio는 HTML이 아닌 JavaScript 파일을 로드하고 실행합니다. 모든 DOM 조작은 JavaScript를 통해 이루어져야 합니다.
예를 들어 다음 코드는 div를 정의하고 DOM에 추가합니다.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
코드 번들링
Looker Studio 커뮤니티 시각화에서는 하나의 JavaScript 파일만 로드할 수 있습니다. 업로드된 코드는 dscc 헬퍼 라이브러리, JavaScript 시각화 라이브러리, 시각화 코드를 포함하는 단일 파일이어야 합니다.
bash에서 이렇게 하려면 아래와 같이 cat 명령어를 사용하면 됩니다.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
매니페스트 정의
시각화 매니페스트 파일은 시각화에 관한 메타데이터와 시각화 리소스의 위치에 관한 정보를 제공합니다. 매니페스트 파일의 위치를 '구성요소 ID'라고 하며 커뮤니티 시각화를 로드하는 데 사용됩니다.
매니페스트 참조에서 샘플 매니페스트를 확인하세요.
매니페스트의 devMode 매개변수는 시각화의 캐싱 동작을 결정합니다. 시각화를 개발하는 동안 devMode은 true이어야 하드 새로고침이 리소스의 최신 버전을 로드할 수 있습니다. 코드가 안정화되면 커뮤니티 시각화가 포함된 보고서가 빠르게 로드되도록 devMode가 false여야 합니다. 캐싱에 대해 자세히 알아보려면 캐싱 고급 가이드를 참고하세요.
다음 단계
시각화 코드를 작성했으므로 시각화를 호스팅하는 방법을 알아보세요.