可視化とクエリのプロパティ テーブル

Visualization

このコンポーネントは、クエリ コンテキストからデータと構成を取得し、適切なビジュアリゼーションをレンダリングします。これらのプロパティに数値のピクセル値を渡すことで、幅と高さをカスタマイズできます。

プロパティ	値	注
width	数値（ピクセル単位）	プロパティが未定義の場合はデフォルトで 100%。
height	数値（ピクセル単位）	プロパティが未定義の場合はデフォルトの 500 ピクセル。
chartTypeMap	Key-Value オブジェクト	アダプター システムで特定のグラフタイプ値が発生した場合にレンダリングするコンポーネントを定義する Key-Value オブジェクトを受け入れます。これを使用して、Looker のデフォルトのグラフをオーバーライドしたり、アダプター システムに新しいグラフの種類を追加したりできます。

使用例:

import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</Query>

Query

Query は Google の JavaScript API と統合され、リクエスト / レスポンス サイクルを処理し、クエリ ID または qid 値によってクエリ レスポンスを取得します。オーバーライドしたビューを API レスポンスとマージして、すべてのデータを React のコンテキストに読み込むようにすることもできます。

プロパティ	値	注
query	数値 | 文字列	Explore URL の qid プロパティの後にある Query.client_id（3fdrdE0b3ATltUvXBaSOPN）または数値クエリ ID（1234）のいずれかを受け入れることができます。数値クエリ ID にアクセスできる場合、この値から始めると、追加のサーバー リクエストを 1 つ保存できます。 Query は、query または dashboard のどちらか一方のみを受け入れます。
dashboard	数値	数値のダッシュボード ID（1234）を受け入れます。数値のダッシュボード ID にアクセスできる場合、この値から開始すると、追加のサーバー リクエストを 1 つ保存できます。 dashboard は、LookML ダッシュボードの文字列 ID を受け入れません。 Query は、query プロパティと dashboard プロパティのどちらか一方だけを受け入れます。
config	type の値に応じて、以下のプロパティを指定できます。 type、legend、positioning、render_null_values、tooltips、series、x_axis、y_axis サポートされている値については、このページの後半にあるドキュメントをご覧ください。	グラフの構成設定を行い、オーバーライドします。
LoadingIndicator	コンポーネント リファレンス	マウントされていないコンポーネント参照を受け入れます。デフォルト: ProgressCircular

import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

面グラフのプロパティ

面グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'area'
legend	false（無効にする場合）、または { position: 'left' | 'bottom' | 'right' | 'top' }	凡例の位置を設定するか、false に設定して、凡例を無効にします。 デフォルト: { position: 'bottom' }
positioning	'overlay' | 'stacked' | 'percent'	グラフ スタッキング モード。デフォルト: 'overlay'
render_null_values	ブール値	null 値を 0 として扱います。デフォルト: false
tooltips	ブール値	データポイントにカーソルを合わせたときに表示されるツールチップを有効または無効にします。デフォルト: true
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
x_axis	X 軸の構成	構成オプションと使用例については、x 軸をご覧ください。
y_axis	Y 軸の構成	構成オプションと使用例については、Y 軸をご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series プロパティは、一連の時系列設定や、レスポンス内の特定のシリーズをオーバーライドする名前付きオブジェクトのいずれかを受け入れることができます。

プロパティ	値	注
color	文字列	16 進数コード
label	文字列
line_width	数値	ラインのストロークの幅をピクセル単位で設定します。デフォルト: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	点の形状を設定します。デフォルト: 'circle'
style	'none' | 'filled' | 'outline'	ポイント スタイルを設定します。デフォルト: 'none'（ポイント無効）
visible	ブール値	データ系列を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

このグラフでは現在、1 つの X 軸しかサポートされていませんが、API は将来を見据えて構成されており、複数の軸の構成をサポートするように設計されています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	X 軸ラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	ブール値	データポイントの順序を逆にします。デフォルト: false
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

現時点でチャートでサポートされているのは 1 つの Y 軸のみですが、この API は将来を見据えて構成されており、複数の軸の構成に対応しています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値 (min) | 'auto'、数値 (max) | 'auto']	Y 軸の最小値と最大値を設定します。最小値を 'auto' に設定するとデフォルトは 0 になり、最大値を 'auto' に設定するとセット内のデータポイントの最大数がデフォルトで設定されます。デフォルト: ['auto' | 'auto']
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

棒グラフと縦棒グラフのプロパティ

棒グラフと縦棒グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'bar' | 'column'
legend	false（無効にする場合）、または { position: 'left' | 'bottom' | 'right' | 'top' }	凡例の位置を設定するか、false に設定して、凡例を無効にします。デフォルト: { position: 'bottom' }
positioning	'grouped' | 'stacked' | 'percent'	グラフ スタッキング モード。デフォルト: 'overlay'
tooltips	ブール値	データポイントにカーソルを合わせたときに表示されるツールチップを有効または無効にします。 デフォルト: true
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
x_axis	X 軸の構成	構成オプションと使用例については、x 軸をご覧ください。
y_axis	Y 軸の構成	構成オプションと使用例については、Y 軸をご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series プロパティは、一連の時系列設定や、レスポンス内の特定のシリーズをオーバーライドする名前付きオブジェクトのいずれかを受け入れることができます。

プロパティ	値	注
color	文字列	16 進数コード
label	文字列
visible	ブール値	データ系列を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

x_axis

このグラフでは現在、1 つの X 軸しかサポートされていませんが、API は将来を見据えて構成されており、複数の軸の構成をサポートするように設計されています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	X 軸ラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	ブール値	データポイントの順序を逆にします。デフォルト: false
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

現時点でチャートでサポートされているのは 1 つの Y 軸のみですが、この API は将来を見据えて構成されており、複数の軸の構成に対応しています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値 (min) | 'auto'、数値 (max) | 'auto']	Y 軸の最小値と最大値を設定します。最小値を '自動&#39 に設定すると、デフォルトは 0 になり、最大値を '自動&#39 に設定します。デフォルトは、セット内の最大データポイント値です。デフォルト: ['auto' | 'auto']
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

折れ線グラフのプロパティ

折れ線グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'line'
legend	false（無効にする場合）、または { position: 'left' | 'bottom' | 'right' | 'top' }	凡例の位置を設定するか、false に設定して、凡例を無効にします。デフォルト: { position: 'bottom' }
render_null_values	ブール値	null 値を 0 として扱います。デフォルト: false
tooltips	ブール値	データポイントにカーソルを合わせたときに表示されるツールチップを有効または無効にします。デフォルト: true
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
x_axis	X 軸の構成	構成オプションと使用例については、x 軸をご覧ください。
y_axis	Y 軸の構成	構成オプションと使用例については、Y 軸をご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series プロパティは、一連の時系列設定や、レスポンス内の特定のシリーズをオーバーライドする名前付きオブジェクトのいずれかを受け入れることができます。

プロパティ	値	注
color	文字列	16 進数コード
label	文字列
line_width	数値	ラインのストロークの幅をピクセル単位で設定します。デフォルト: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	点の形状を設定します。デフォルト: 'circle'
style	'none' | 'filled' | 'outline'	ポイント スタイルを設定します。デフォルト: 'none'（ポイント無効）
visible	ブール値	データ系列を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

このグラフでは現在、1 つの X 軸しかサポートされていませんが、API は将来を見据えて構成されており、複数の軸の構成をサポートするように設計されています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	X 軸ラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	ブール値	データポイントの順序を逆にします。デフォルト: false
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

現時点でチャートでサポートされているのは 1 つの Y 軸のみですが、この API は将来を見据えて構成されており、複数の軸の構成に対応しています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値 (min) | 'auto'、数値 (max) | 'auto']	Y 軸の最小値と最大値を設定します。最小値を '自動&#39 に設定すると、デフォルトは 0 になり、最大値を '自動&#39 に設定します。デフォルトは、セット内の最大データポイント値です。デフォルト: ['auto' | 'auto']
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

散布図のプロパティ

散布図の config プロパティは次のとおりです。

プロパティ	値	注
type	'scatter'
legend	false（無効にする場合）、または { position: 'left' | 'bottom' | 'right' | 'top' }	凡例の位置を設定するか、false に設定して、凡例を無効にします。デフォルト: { position: 'bottom' }
render_null_values	ブール値	null 値を 0 として扱います。デフォルト: false
tooltips	ブール値	データポイントにカーソルを合わせたときに表示されるツールチップを有効または無効にします。デフォルト: true
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
x_axis	X 軸の構成	構成オプションと使用例については、x 軸をご覧ください。
y_axis	Y 軸の構成	構成オプションと使用例については、Y 軸をご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

series プロパティは、一連の時系列設定や、レスポンス内の特定のシリーズをオーバーライドする名前付きオブジェクトのいずれかを受け入れることができます。

プロパティ	値	注
color	文字列	16 進数コード
label	文字列
line_width	数値	散布図での点のサイズの設定に使用されます。各ポイントのアウトライン値と考えることができます。デフォルト: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	点の形状を設定します。デフォルト: 'circle'
style	'none' | 'filled' | 'outline'	ポイント スタイルを設定します。デフォルト: 'none'（ポイント無効）
size_by	false | 文字列	各ポイントのサイズを調整するシリーズ名。動的ポイントサイズ設定を無効にするには、false を設定します。デフォルト: false
visible	ブール値	データ系列を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

x_axis

このグラフでは現在、1 つの X 軸しかサポートされていませんが、API は将来を見据えて構成されており、複数の軸の構成をサポートするように設計されています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	X 軸ラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	ブール値	データポイントの順序を逆にします。デフォルト: false
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

現時点でチャートでサポートされているのは 1 つの Y 軸のみですが、この API は将来を見据えて構成されており、複数の軸の構成に対応しています。

プロパティ	値	注
gridlines	ブール値	垂直グリッド線を表示または非表示にします。デフォルト: false
label	false（ラベルを非表示にする） | 文字列（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値 (min) | 'auto'、数値 (max) | 'auto']	Y 軸の最小値と最大値を設定します。最小値を '自動&#39 に設定すると、デフォルトは 0 になり、最大値を '自動&#39 に設定します。デフォルトは、セット内の最大データポイント値です。デフォルト: ['auto' | 'auto']
values	ブール値	軸に沿ってレンダリングされる値を表示または非表示にします。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

単一値グラフのプロパティ

単一値グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'single_value'

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

スパークライン グラフのプロパティ

スパークライン グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'sparkline'
render_null_values	ブール値	null 値を 0 として扱います。デフォルト: false
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
y_axis	Y 軸の構成	構成オプションと使用例については、Y 軸をご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

Sparkline は本質的には 1 つのシリーズのみをサポートしていますが、ライブラリの他のグラフタイプとの一貫性を保つため、名前付きシリーズや配列シリーズのオーバーライドを含む API パターンを維持しています。

プロパティ	値	注
color	文字列	16 進数コード
line_width	数値	ラインのストロークの幅をピクセル単位で設定します。デフォルト: 3

使用例:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

y_axis

現時点でチャートでサポートされているのは 1 つの Y 軸のみですが、この API は将来を見据えて構成されており、複数の軸の構成に対応しています。

プロパティ	値	注
range	[数値 (min) | 'auto'、数値 (max) | 'auto']	Y 軸の最小値と最大値を設定します。最小値を '自動&#39 に設定すると、デフォルトは 0 になり、最大値を '自動&#39 に設定します。デフォルトは、セット内の最大データポイント値です。デフォルト: ['auto' | 'auto']

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

表グラフのプロパティ

表グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'table'
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。
column_order	string[]	時系列の列の配列（'orders.count' など）。表の列を左から右に並べ替える方法を指定します。
show_row_numbers	boolean	表の下部にある [合計] 行の表示を切り替えます。デフォルト: true
show_totals	boolean	表の下部にある [合計] 行の表示を切り替えます。デフォルト: true
show_row_totals	boolean	表の右側にある行の合計数の表示を切り替えます。デフォルト: true
truncate_text	boolean	true の場合、表のセルのテキストは 1 行に制限され、コンテンツのオーバーフローは省略記号で切り捨てられます。false の場合、コンテンツを複数の行に折り返すことができます。デフォルト: true
truncate_header	boolean	true の場合、テーブルのヘッダーのラベルは 1 行に制限され、コンテンツのオーバーフローは省略記号で切り捨てられます。false の場合、ヘッダーは複数の行に折り返すことができます。デフォルト: true

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

系列プロパティには、系列構成の配列か、レスポンス内の特定の系列をオーバーライドする名前付きオブジェクトを指定できます。

プロパティ	値	注
cell_visualization	boolean	インラインのセル ビジュアリゼーションをオンまたはオフにします。最初のメジャーはデフォルトの true になり、その他のメジャーは false になります。
color	string	テーブルセルのビジュアリゼーションのレンダリングに使用する色を指定します。
value_format	string	値を通貨としてレンダリングするかどうか、浮動小数点精度で表すか、カンマまたはピリオドを使用して数千分を表すかなどを示す数値形式設定文字列。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

円グラフのプロパティ

円グラフの config プロパティは次のとおりです。

プロパティ	値	注
type	'pie'
legend	false（無効にする場合） | 凡例の構成	false に設定すると、凡例が無効になります。デフォルト: 有効構成オプションと有効になっている場合の使用例については、凡例をご覧ください。
tooltips	ブール値	データポイントにカーソルを合わせたときに表示されるツールチップを有効または無効にします。デフォルト: true
series	view_name.field_name 形式の系列	構成オプションと使用例については、シリーズ セクションをご覧ください。

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

legend プロパティは、次の凡例の構成を受け入れることができます。

プロパティ	値	注
type	'labels' | 'legend'	labels は、各スライスを直接指すラベルを配置します。legend は、別の凡例を配置します。デフォルト: 'legend'
position	'top' | 'bottom' | 'left' | 'right'	type: 'legend' の凡例は、デフォルト: 'right'
width	数値	type: 'legend' のときの凡例の最大幅（ピクセル単位）。デフォルト: 300
value	'label' | 'label_value' | 'value' | 'percent' | 'label_percent'	凡例のコンテンツ（ラベル、ラベルと値、値、パーセント、ラベル、パーセント）を設定します。デフォルト: 'label_percent'

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

series

デカルトグラフとは異なり、円グラフの各データポイントは、新しい系列として扱われます。

プロパティ	値	注
color	文字列	16 進数コード

使用例:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>