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

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>