圖表和查詢屬性表

Visualization

這個元件會從查詢內容擷取資料和設定，並轉換成適當的圖表。您可以將數字像素值傳遞至這些屬性，自訂寬度和高度。

資源 值 附註
width 數字 (以像素為單位) 當屬性未定義時，預設為 100%。
height 數字 (以像素為單位) 當屬性未定義時，預設為 500 像素。
chartTypeMap 鍵/值物件 可接受鍵/值物件，用於定義轉接程式系統遇到特定圖表類型值時要轉譯的元件。可用於覆寫 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 數字 | 字串 可接受 Query.client_id (位於 Explore 網址中 qid 屬性之後，3fdrdE0b3ATltUvXBaSOPN) 或數字查詢 ID (1234)。如果您可以存取數字查詢 ID，從這個值開始可以省下額外的伺服器要求。

Query 只接受 query 或 dashboard 屬性，不能同時接受兩者。
dashboard 號碼 可接受數字版資訊主頁 ID (1234)。如果您可以存取數字版資訊主頁 ID，從這個值開始可以省下額外的伺服器要求。

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 布林值 將空值視為 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 字串 十六進位碼
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

雖然目前的圖表只支援單一 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

雖然目前的圖表只支援單一 y 軸，但我們的 API 已做好準備，可支援多軸設定。

資源 值 附註
gridlines 布林值 顯示或隱藏垂直格線。預設值：false。
label false (用於隱藏標籤) | 字串 (要轉譯的值) 將值設為 y 軸標籤。預設：false (沒有標籤)
range [數字 (最小) | 'auto', 數字 (最大) | 'auto'] 設定 Y 軸的最小值和最大值。將 min 設為 'auto' 的預設值為 0，將 max 設為 '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 字串 十六進位碼
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

雖然目前的圖表只支援單一 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

雖然目前的圖表只支援單一 y 軸，但我們的 API 已做好準備，可支援多軸設定。

資源 值 附註
gridlines 布林值 顯示或隱藏垂直格線。預設值：false。
label false (用於隱藏標籤) | 字串 (要轉譯的值) 將值設為 y 軸標籤。預設：false (沒有標籤)
range [數字 (最小) | 'auto', 數字 (最大) | 'auto'] 設定 Y 軸的最小值和最大值。將 min 設為「auto」時，預設值為 0，將 max 設為「auto」時，預設值為集合中的最大資料點值。預設值：['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 布林值 將空值視為 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 字串 十六進位碼
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

雖然目前的圖表只支援單一 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

雖然目前的圖表只支援單一 y 軸，但我們的 API 已做好準備，可支援多軸設定。

資源 值 附註
gridlines 布林值 顯示或隱藏垂直格線。預設值：false
label false (用於隱藏標籤) | 字串 (要轉譯的值) 將值設為 y 軸標籤。預設：false (沒有標籤)
range [數字 (最小) | 'auto', 數字 (最大) | 'auto'] 設定 Y 軸的最小值和最大值。將 min 設為「auto」時，預設值為 0，將 max 設為「auto」時，預設值為集合中的最大資料點值。預設值：['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 布林值 將空值視為 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 字串 十六進位碼
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

雖然目前的圖表只支援單一 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

雖然目前的圖表只支援單一 y 軸，但我們的 API 已做好準備，可支援多軸設定。

資源 值 附註
gridlines 布林值 顯示或隱藏垂直格線。預設值：false。
label false (用於隱藏標籤) | 字串 (要轉譯的值) 將值設為 y 軸標籤。預設：false (沒有標籤)
range [數字 (最小) | 'auto', 數字 (最大) | 'auto'] 設定 Y 軸的最小值和最大值。將 min 設為「auto」時，預設值為 0，將 max 設為「auto」時，預設值為集合中的最大資料點值。預設值：['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 布林值 將空值視為 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 本身只支援單一序列，但我們會維持 API 模式，包括命名或陣列序列覆寫，以便與程式庫中的其他圖表類型保持一致。

資源 值 附註
color 字串 十六進位碼
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 軸的最小值和最大值。將 min 設為「auto」時，預設值為 0，將 max 設為「auto」時，預設值為集合中的最大資料點值。預設值：['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 時，表格儲存格文字會限制為單行，且內容溢出時會以刪節號截斷。當 false 時，內容會自動換行至多行。預設值：true
truncate_header boolean 當 true 時，表格標題標籤會限制為單行，且內容溢位會以刪節號截斷。當 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 字串 十六進位碼

使用範例：

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>