시각화 코드 작성
데이터 스튜디오 도우미 라이브러리는 사용자와 데이터 스튜디오 간의 인터페이스를 제공합니다. 라이브러리를 사용하려면 시각화를 렌더링하는 콜백 함수를 제공하세요.
라이브러리에서 가장 중요한 함수는 subscribeToData입니다. 이 함수는 시각화를 렌더링하는 callback 함수와 데이터에 적용할 변환 유형을 지정하는 options 객체라는 두 가지 인수를 사용합니다. 자세한 내용은 라이브러리 참조를 검토하세요.
다음은 시각화 자바스크립트의 모양을 보여주는 개요입니다.
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})
커뮤니티 시각화를 작성할 때는 몇 가지 중요한 사항에 유의해야 합니다.
데이터, 스타일 지정 또는 iframe 크기가 변경되면 subscribeToData 함수에서 업데이트가 발생합니다.
예를 들면 다음과 같습니다.
// 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 조작은 자바스크립트를 통해 이루어져야 합니다.
예를 들어 다음 코드는 DOM에 div를 정의하고 추가합니다.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
코드 번들
Looker Studio 커뮤니티 시각화에서는 하나의 자바스크립트 파일만 로드할 수 있습니다. 업로드된 코드는 dscc 도우미 라이브러리, 자바스크립트 시각화 라이브러리, 시각화 코드.
bash에서 이 작업을 실행하려면 아래와 같이 cat 명령어를 사용하면 됩니다.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
매니페스트 정의
시각화 매니페스트 파일은 시각화에 관한 메타데이터와 시각화 리소스의 위치에 관한 정보를 제공합니다. 매니페스트 파일의 위치는 '구성요소 ID'라고 하며 커뮤니티 시각화를 로드하는 데 사용됩니다.
샘플 매니페스트를 보려면 매니페스트 참조를 검토하세요.
매니페스트의 devMode 매개변수는 시각화의 캐싱 동작을 결정합니다. 시각화를 개발하는 동안 devMode는 true여야 하드 새로고침이 최신 버전의 리소스를 로드하도록 합니다. 코드가 안정화되면 커뮤니티 시각화가 포함된 보고서가 빠르게 로드되도록 devMode는 false여야 합니다. 캐싱에 관한 자세한 내용은
캐싱 고급 가이드를 참고하세요.