ビジュアル表示コードの記述
Looker Studio ヘルパー ライブラリは、Looker Studio との間のインターフェースを提供します。ライブラリを使用するには、ビジュアル表示をレンダリングするコールバック関数を提供します。
ライブラリで最も重要な関数は subscribeToData です。この関数は、ビジュアリゼーションをレンダリングする callback 関数と、データが取得するべき変換の種類を指定する options オブジェクトの 2 つの引数を取得します。詳しくは、ライブラリ リファレンスをご確認ください。
以下は、ビジュアル表示 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 ファイルは、1 つのみです。アップロードするコードでは、dscc ヘルパー ライブラリ、JavaScript ビジュアリゼーション ライブラリ、ビジュアリゼーション コードを単一のファイルに含めなければなりません。
bash でこれを行うには、以下のように cat コマンドを使用できます。
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
マニフェストの定義
ビジュアル表示マニフェスト ファイルでは、ビジュアル表示に関するメタデータと、ビジュアル表示リソースの場所に関する情報を提供します。マニフェスト ファイルの場所は「コンポーネント ID」と呼ばれ、コミュニティ由来ビジュアル表示を読み込むために使用されます。
マニフェスト リファレンスで、サンプル マニフェストをご確認ください。
にする必要があります。マニフェストの devMode パラメータにより、ビジュアリゼーションのキャッシュ動作が決定されます。ビジュアリゼーションの開発中は devMode を true に設定して、強制更新によりリソースの最新バージョンが確実に読み込まれるようにします。コードが安定したら、devMode を false に設定して、コミュニティ ビジュアリゼーションを含むレポートがすばやく読み込まれるようにします。キャッシュについて詳しくは、キャッシュについての詳細ガイドをご覧ください。
次のステップ
ビジュアリゼーションのコードの記述が完了したので、ビジュアリゼーションをホストする方法を学びます。