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 値によってクエリ レスポンスを取得します。vis config オーバーライドを渡して 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
|
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>