시각화 코드 작성
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이 아닌 자바스크립트 파일을 로드하고 실행합니다. 모든 DOM 조작은 자바스크립트를 통해 이루어져야 합니다.
예를 들어 다음 코드는 div를 정의하고 DOM에 추가합니다.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
코드 번들
Looker Studio 커뮤니티 시각화에서는 JavaScript 파일을 하나만 로드할 수 있습니다. 업로드된 코드는 dscc 도우미 라이브러리, 모든 자바스크립트 시각화 라이브러리, 시각화 코드를 포함하는 단일 파일이어야 합니다.
bash에서 이 작업을 수행하려면 아래와 같이 cat 명령어를 사용하면 됩니다.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
매니페스트 정의
시각화 매니페스트 파일은 시각화에 대한 메타데이터와 시각화 리소스의 위치에 대한 정보를 제공합니다. 매니페스트 파일의 위치를 '구성요소 ID'라고 하며 커뮤니티 시각화를 로드하는 데 사용됩니다.
매니페스트 참조를 검토하여 샘플 매니페스트를 확인합니다.
매니페스트의 devMode 매개변수가 시각화의 캐싱 동작을 결정합니다. 시각화를 개발하는 동안 강제로 새로고침에서 최신 버전의 리소스가 로드되도록 하려면 devMode가 true이어야 합니다. 코드가 안정화되면 커뮤니티 시각화가 포함된 보고서가 빠르게 로드되도록 devMode는 false이어야 합니다. 캐싱에 대한 자세한 내용은 캐싱 고급 가이드를 참조하세요.
다음 단계
시각화 코드를 작성했으므로 이제 시각화를 호스팅하는 방법을 알아봅니다.