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

コミュニティ由来ビジュアル表示の設定リファレンス

ビジュアル表示設定により、ビジュアル表示に必要なデータとスタイル属性が定義されます。

設定は、次の構造を持つ JSON ファイルとして想定されています。

{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}

フィールド名	タイプ	説明
`data[]`	`Array(object)`	ビジュアル表示のデータ設定。この設定は、プロパティパネルの [データ] ペインに影響します。
`data[].id`	`string`	データセクションの ID。スペースを含まない、空でない文字列にします。
`data[].label`	`string`	データセクションのラベル。
`data[].elements[]`	`string`	レンダリングするデータ要素。
`data[].elements[].type`	`string` enum(DataElement)	レンダリングするデータ要素タイプ。
`data[].elements[].id`	`string`	データ要素の ID。スペースを含まない、空でない文字列にします。
`data[].elements[].label`	`string`	データ要素のツールチップラベル。
`data[].elements[].options`	`object(DataElementOptions)`	要素のデータオプション。これは、データ要素タイプによって異なります。
`style[]`	`Array(object)`	ビジュアル表示に必要なスタイル設定。この設定は、プロパティパネルの [スタイル] ペインに影響します。配列の各オブジェクトは、レンダリングするスタイル要素を表します。要素の順序によって、レンダリングされる順序が決まります。
`style[].id`	`string`	スタイルセクションの ID。スペースを含まない、空でない文字列にします。
`style[].label`	`string`	スタイルセクションのラベル。
`style[].elements`	`Array(object)`	レンダリングするスタイル要素。
`style[].elements[].id`	`string`	スタイル要素の ID。スペースを含まない、空でない文字列にします。
`style[].elements[].type`	`string` enum(StyleElement)	スタイル要素のタイプ（例: フォント選択ツール）。
`style[].elements[].label`	`string`	スタイル要素のツールチップまたはラベル。チェックボックス要素のラベルテキスト、および他の要素タイプのツールチップテキストです。
`style[].elements[].options`	`Array(object)`	要素の `options`。`SELECT_SINGLE` および `SELECT_RADIO` のスタイル要素タイプにのみ有効です。
`style[].elements[].defaultValue`	`string OR object`	スタイル要素のデフォルト値。無効な値は無視されます。*
`interactions[]`	`Array(object)`	ビジュアル表示のインタラクション設定。この設定により、ビジュアル表示がフィルタとして機能できるかどうかが決定されます。
`interactions[].id`	`string`	インタラクション要素の ID。スペースを含まない、空でない文字列にします。
`interactions[].supportedActions`	`Array` (enum(InteractionType)	サポートされているインタラクション。
`features`	`object`	ビジュアリゼーションで有効または無効にする機能。
`features.enableComparisonDateRange`	`boolean`	[比較期間] を有効にします。指定しない場合のデフォルトは `false` です。

*defaultValue は、色選択ツール以外のすべてに使用される文字列です。色選択ツールでは、defaultValue は、次の形式のオブジェクトになります。

{
    color: `string`
}

DataElement

データ要素の値は次のいずれかです。

列挙値	説明
指標	指標フィールドの要素をレンダリングします。
ディメンション	ディメンションフィールド要素をレンダリングします。
MAX_RESULTS	このビジュアリゼーションでリクエストできるデータの最大行数を定義します

DataElement オプション

データ要素の値は次のいずれかです。

列挙値	オプションタイプ	設定可能なオプション
指標	オブジェクト	max: number - 指標の最大数の最小数: 数値 - 必要な指標の最小数
ディメンション	オブジェクト	max: number - サポートされるディメンションの最大数。（最小）: 数値 - 必要なディメンションの最小数 supportedTypes: サポートされているタイプのリスト。`supportedTypes` には、`TIME`、`GEO`、または `DEFAULT` を含めることができます。
MAX_RESULTS	オブジェクト	max: number - ビジュアリゼーションがリクエストできる最大行数。デフォルト: 2500

StyleElement

スタイル要素の値は次のいずれかです。

列挙値	説明	`defaultValue` データ型（構成）	`value` データ型（メッセージ）	デフォルト値
FONT_COLOR	フォントの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。	`STRING` \| `OBJECT<Color>`	`STRING` \| `OBJECT<Color>`	テーマによって決まります。
FONT_SIZE	フォントサイズの選択ツールをレンダリングします。有効な値は、8、9、10、11、12、14、16、18、20、24、28、30、32、36、40、44、48、60、72、84、96 のピクセルです。	`NUMBER`	`NUMBER`	`12`
FONT_FAMILY	フォントファミリーの選択ツールをレンダリングします。有効な値は、次のフォントです: Arial、Boogaloo、Robande Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto Roboto 、 Roboto 、 Roboto 。	`STRING`	`STRING`	テーマによって決まります。
チェックボックス	チェックボックスをレンダリングします。	`BOOLEAN`	`BOOLEAN`	`false`
TEXTINPUT	テキスト入力ボックスをレンダリングします。	`STRING`	`STRING`	`""`
TEXTAREA	大きなテキスト入力領域をレンダリングします。	`STRING`	`STRING`	`""`
SELECT_SINGLE	事前定義された値を持つプルダウンをレンダリングします。	`STRING`（defaultValue、options.label、options.value）	`STRING`	未定義
SELECT_RADIO	事前定義された値でラジオボタン選択ツールをレンダリングします。	`STRING`（defaultValue、options.label、options.value）	`STRING`	未定義
FILL_COLOR	塗りつぶしの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	テーマによって決まります。
BORDER_COLOR	枠線の色選択ツールをレンダリングします。有効な値は 16 進数色コードです。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	テーマによって決まります。
AXIS_COLOR	軸の色選択ツールをレンダリングします。有効な値は 16 進数色コードです。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	テーマによって決まります。
GRID_COLOR	グリッドの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	テーマによって決まります。
不透明度	不透明度セレクタをレンダリングします。単位は % です。有効な値は 0 から 1 で、0.1 単位で指定します。	`NUMBER`	`NUMBER`	`1`
LINE_WEIGHT	線の太さ選択ツールをレンダリングします。有効な値は 0 ～ 5 です。0 は、プルダウンで None としてレンダリングされます。	`NUMBER`	`NUMBER`
LINE_STYLE	線のスタイルの選択ツールをレンダリングします。使用できるデフォルト値: `solid`、`dashed`、`dotted`、`double`。	`STRING`	`STRING`	`"solid"`
BORDER_RADIUS	枠線の半径選択ツールをレンダリングします。有効な値: 0、1、2、3、4、5、10、15、20、25、30、40、50、60、70、80、90、100	`NUMBER`	`NUMBER`	テーマによって決まります。
INTERVAL	間隔セレクタをレンダリングします。値は整数です。	`NUMBER`	`NUMBER`	`0`

スタイル要素により、プロパティパネルの [Style] タブに表示されるアイコンが設定されます。

スタイル要素のオプション

一部のスタイル要素はオプションをサポートしています

options: array(options)

列挙値	オプションオブジェクト
SELECT_SINGLE	{ label: `string`, value: `string` }
SELECT_RADIO	{ label: `string`, value: `string` }
INTERVAL	{ max: `number`, min: `number` }

データ型

Object<Color>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<Color>

16 進数のカラーコードを含む文字列値。

例

"color": "#0000ff"

NUMBER<不透明度>

0.10 単位で指定する 0 ～ 1 の数値

例

"opacity": 0.2

InteractionType

InteractionTypes により、プロパティパネルの Data スタイルで利用可能なインタラクションオプションが設定されます。現時点でサポートされているのは "FILTER" のみです。

列挙値	説明
`"FILTER"`	ユーザーがビジュアル表示をフィルタとして使用できるようにします。

設定のサンプル

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}