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

Visualization

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

プロパティ	値	注
width	数値（ピクセル）	prop が定義されていない場合、デフォルトは 100% です。
height	数値（ピクセル）	prop が定義されていない場合、デフォルトは 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 は、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 later on this page */
  }}
  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	boolean	null 値を 0 として扱います。デフォルト: false
tooltips	boolean	データポイントにカーソルを合わせると、表示されるツールチップを有効または無効にします。デフォルト: 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	boolean	データ系列を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の X 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false
label	false（ラベルを非表示） | string（レンダリングする値）	X 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	boolean	データポイントの順序を逆にします。デフォルト: false
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の y 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値（最小） | 'auto'、数値（最大）| 'auto']	Y 軸の最小値と最大値を設定します。最小を 'auto' に設定するとデフォルトは 0 になり、最大を 'auto' に設定するとデフォルトはセット内の最大データポイント値になります。デフォルト: ['auto' | 'auto']
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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	boolean	データポイントにカーソルを合わせると、表示されるツールチップを有効または無効にします。 デフォルト: 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	boolean	データ系列を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の X 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	X 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	boolean	データポイントの順序を逆にします。デフォルト: false
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の y 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値（最小） | 'auto'、数値（最大）| 'auto']	Y 軸の最小値と最大値を設定します。最小を「自動」に設定するとデフォルトの 0 に、最大を「自動」に設定するとセット内の最大のデータポイント値になります。デフォルト: ['auto' | 'auto']。
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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	boolean	null 値を 0 として扱います。デフォルト: false
tooltips	boolean	データポイントにカーソルを合わせると、表示されるツールチップを有効または無効にします。デフォルト: 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	boolean	データ系列を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の X 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	X 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	boolean	データポイントの順序を逆にします。デフォルト: false
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の y 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false
label	false（ラベルを非表示） | string（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値（最小） | 'auto'、数値（最大）| 'auto']	Y 軸の最小値と最大値を設定します。最小を「自動」に設定するとデフォルトの 0 に、最大を「自動」に設定するとセット内の最大のデータポイント値になります。デフォルト: ['auto' | 'auto']。
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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	boolean	null 値を 0 として扱います。デフォルト: false
tooltips	boolean	データポイントにカーソルを合わせると、表示されるツールチップを有効または無効にします。デフォルト: 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	boolean	データ系列を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の X 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	X 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
reversed	boolean	データポイントの順序を逆にします。デフォルト: false
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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

現在、グラフでは単一の y 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
gridlines	boolean	縦方向のグリッド線の表示と非表示を切り替えます。デフォルト: false。
label	false（ラベルを非表示） | string（レンダリングする値）	Y 軸のラベルとしてレンダリングする値を設定します。デフォルト: false（ラベルなし）
range	[数値（最小） | 'auto'、数値（最大）| 'auto']	Y 軸の最小値と最大値を設定します。最小を「自動」に設定するとデフォルトの 0 に、最大を「自動」に設定するとセット内の最大のデータポイント値になります。デフォルト: ['auto' | 'auto']。
values	boolean	軸に沿ってレンダリングされた値を表示または非表示にします。デフォルト: 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	boolean	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

スパークラインは本質的に 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

現在、グラフでは単一の y 軸のみがサポートされていますが、API は将来を見据え、複数の軸の構成をサポートするように構造化されています。

プロパティ	値	注
range	[数値（最小） | 'auto'、数値（最大）| 'auto']	Y 軸の最小値と最大値を設定します。最小を「自動」に設定するとデフォルトの 0 に、最大を「自動」に設定するとセット内の最大のデータポイント値になります。デフォルト: ['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	boolean	データポイントにカーソルを合わせると、表示されるツールチップを有効または無効にします。デフォルト: 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>