시각화 작성

시각화 코드 작성

Looker Studio 도우미 라이브러리는 사용자와 Looker 간의 인터페이스를 제공합니다. 있습니다. 라이브러리를 사용하려면 시각화입니다.

라이브러리에서 가장 두드러진 함수는 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 조작 JavaScript를 통해 이루어져야 합니다.

예를 들어 다음 코드는 div를 정의하고 DOM에 추가합니다.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

코드 번들 만들기

Looker Studio 커뮤니티 시각화를 사용하면 JavaScript 1개만 로드할 수 있습니다. 파일에서 참조됩니다. 업로드된 코드는 dscc를 포함하는 단일 파일이어야 합니다. 도우미 라이브러리, 모든 JavaScript 시각화 라이브러리, 시각화 있습니다.

bash에서 이 작업을 수행하려면 다음과 같이 cat 명령어를 사용하면 됩니다.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

매니페스트 정의

시각화 매니페스트 파일은 다음과 같이 시각화에 대한 메타데이터를 제공합니다. 시각화 리소스의 위치에 대한 정보도 포함됩니다. 위치 '구성요소 ID'라고 하며 커뮤니티 시각화입니다.

매니페스트 참조를 검토하여 샘플 매니페스트를 확인합니다.

매니페스트의 devMode 매개변수는 시각화입니다. 시각화를 개발하는 동안 devMode가 true이어야 합니다. 하드 새로고침 시 최신 버전의 리소스가 로드되도록 합니다. 일단 안정적이므로 devMode가 false여야 커뮤니티 시각화가 빠르게 로드됩니다. 캐싱에 대한 자세한 내용은 다음을 참조하세요. 캐싱 고급 가이드를 참조하세요.

다음 단계

이제 시각화 코드를 작성했으므로 다음을 수행하는 방법을 알아봅니다. 시각화 호스팅