このページは Cloud Translation API によって翻訳されました。

ビジュアリゼーション設定の定義

コミュニティビジュアリゼーションのデータおよびスタイルのオプションは、設定 JSON で定義されます。data 設定により、ビジュアリゼーションでサポートされているディメンションと指標の数が設定されます。style 設定では、プロパティパネルで使用可能なスタイル選択ツールが定義されます。

データ構成

data 設定では、Looker Studio でプロパティパネルにレンダリングされる DIMENSION 要素と METRIC 要素を定義します。各要素は、ビジュアル表示への入力としてエンドユーザーが提供するディメンションおよび要素のフィールドに対応します。

サンプルデータ要素:

{
  "id": "twoDimensionsPlease",
  "label": "Dimension Element Heading",
  "type": "DIMENSION",
  "options": {
    "min": 2,
    "max": 2,
  }
}

データ要素で定義した id は、Looker Studio から返される情報に含まれます。label ではデータセクションの上に表示されるテキストを定義し、type ではそれがディメンションか指標かを定義します。options オブジェクトで、ユーザーがデータ要素に追加できるフィールドの最小数と最大数を定義します。

DIMENSION データ要素では、options オブジェクトはオプションの supportedTypes キーをサポートしています。定義した場合、要素に追加できるディメンションフィールドのタイプが制限されます。supportedTypes の値には、「DEFAULT」、「TIME」、および「GEO」の任意の組み合わせを含む配列を指定できます。

データセクションで、複数のデータ要素がグループ化され、Looker Studio では、複数のデータ要素の見出しとして label がレンダリングされます。

サンプルのデータセクション:

{
  "id": "dimensionSection1",
  "label": "Dimension Section Heading",
  "elements":[
    // array of data elements
  ]
}

次のスクリーンショットは、Looker Studio で上記のデータセクションとデータ要素がどのように表示されるかを示しています。

プロパティパネルのデータ要素のスクリーンショット

スタイル設定

スタイル設定で、プロパティパネルに表示されるスタイル選択ツールを定義します。

サンプルのスタイル要素:

{
  "id": "linkOpacity",
  "label": "Link opacity",
  "type": "OPACITY",
  "defaultValue": "0.2"
}

label はツールチップとして表示されるテキストを定義し、type は Looker Studio がレンダリングするスタイルセレクタの種類を定義します。必要に応じて、defaultValue で各スタイル要素のデフォルト値を定義します。

データ要素と同様に、スタイル要素は見出しと論理グループを指定して、セクション内で定義します。使用可能な選択ツールの完全なリストについては、設定リファレンスをご覧ください。

スタイルセクションのサンプル:

{
  "id": "styleGroup1",
  "label": "Header for style group",
  "elements": [
    // insert Style Elements here
  ]
}

次のスクリーンショットは、不透明度選択ツールを備えたスタイルパネルの例を示しています。例中のツールチップ「Link Opacity」は、スタイル要素の label に対応しています。

スタイル選択ツールのスクリーンショット

インタラクション設定

interaction 設定では、コミュニティビジュアリゼーションにおけるグラフインタラクションの動作を定義します。この設定は省略可能です。

例:

{
  "id": "onClick",
  "supportedActions": ["FILTER"]
}

現時点でサポートされているのは FILTER のみです。インタラクションを設定すると、プロパティパネルにチェックボックスが表示されます。

スタイル選択ツールのスクリーンショット

機能設定

features 設定では、コミュニティビジュアリゼーションの各種機能をオンまたはオフにできます。このセクションはオプションです。機能のリストについては、構成リファレンスをご覧ください。

例:

  "features": {
    "enableComparisonDateRange": true
  }

例

ビジュアル表示設定のサンプルを確認するには、サンプル設定を参照してください。

次のステップ

設定の定義が完了したので、ビジュアリゼーションを記述します。