本頁面由 Cloud Translation API 翻譯而成。

社群視覺化設定參考資料

視覺化設定會定義圖表

設定必須是 JSON 檔案，且結構如下：

{
  "data": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(DataElement),
      "id": string,
      "label": string,
      "options": object(DataElementOptions)
    }]
  }],
  "style": [{
    "id": string,
    "label": string,
    "elements": [{
      "type": enum(StyleElement),
      "id": string,
      "label": string,
      "defaultValue": string | object
    }]
  }],
  "interactions": [{
    "id": string,
    "supportedActions": array(enum(InteractionType))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}

欄位名稱	類型	說明
`data[]`	`Array(object)`	視覺化呈現的資料設定。這項設定會影響屬性面板的「資料」窗格。
`data[].id`	`string`	資料區段的 ID。必須是不含空格的非空白字串。
`data[].label`	`string`	資料部分的標籤。
`data[].elements[]`	`string`	要呈現的資料元素。
`data[].elements[].type`	`string` 列舉(DataElement)	要呈現的資料元素類型。
`data[].elements[].id`	`string`	資料元素的 ID。必須是不含空格的非空白字串。
`data[].elements[].label`	`string`	資料元素的工具提示標籤。
`data[].elements[].options`	`object(DataElementOptions)`	元素的資料選項。這取決於資料元素類型。
`style[]`	`Array(object)`	視覺呈現所需的樣式設定。這項設定會影響屬性面板的「Style」窗格。陣列中的每個物件都代表要算繪的樣式元素。元素的順序決定了這些元素的顯示順序。
`style[].id`	`string`	樣式區段的 ID。必須是不含空格的非空白字串。
`style[].label`	`string`	樣式部分的標籤。
`style[].elements`	`Array(object)`	要算繪的樣式元素。
`style[].elements[].id`	`string`	樣式元素的 ID。必須為非空白字串，且不含空格。
`style[].elements[].type`	`string` 列舉(StyleElement)	樣式元素類型。例如：字型選取器。
`style[].elements[].label`	`string`	樣式元素的工具提示或標籤。這是核取方塊元素的標籤文字，也是其他元素類型的工具提示文字。
`style[].elements[].options`	`Array(object)`	元素的 `options`。這只適用於 `SELECT_SINGLE` 和 `SELECT_RADIO` 樣式元素類型。
`style[].elements[].defaultValue`	`string OR object`	樣式元素的預設值。系統會忽略無效值*。
`interactions[]`	`Array(object)`	圖表的互動設定。這項設定可決定該系統能否做為篩選條件。
`interactions[].id`	`string`	互動元素的 ID。必須是不含空格的非空白字串。
`interactions[].supportedActions`	`Array` (列舉(InteractionType)	支援的可能互動
`features`	`object`	要在圖表中啟用或停用的功能。
`features.enableComparisonDateRange`	`boolean`	啟用比較日期範圍。如未指定，預設為 `false`。

*defaultValue 是顏色選取器以外的所有項目字串。適用對象顏色，則 defaultValue 應是採用下列格式的物件：

{
    color: `string`
}

DataElement

資料元素的值可能為下列其中一個值：

列舉值	說明
指標	呈現指標欄位元素。
維度	呈現尺寸欄位元素。
MAX_RESULTS	定義這項視覺呈現可要求的資料量上限

DataElement 選項

資料元素的值可能為下列其中一個值：

列舉值	選項類型	可用選項
指標	物件	max: number - 指標數量上限分鐘：數字 - 所需的指標數量下限
維度	物件	max: number - 支援的維度數量上限。分鐘：數字 - 所需的維度數量下限 supportedTypes：支援的類型清單。`supportedTypes` 可包含 `TIME`、`GEO` 或 `DEFAULT`
MAX_RESULTS	物件	max: number - 圖表可要求的資料列數量上限。預設：2500

StyleElement

樣式元素的值可為下列其中一個值：

列舉值	說明	`defaultValue` 個資料類型 (設定)	`value` 資料類型 (訊息)	預設值
FONT_COLOR	呈現字型顏色選取器。有效值為十六進位顏色代碼。	`STRING` \| `OBJECT<Color>`	`STRING` \| `OBJECT<Color>`	由主題決定。
FONT_SIZE	顯示字型大小選取器。有效值為下列像素：8、9、10、11、12、14、16、18、20、24、28、30、32、36、40、44、48、60、72、84、96。	`NUMBER`	`NUMBER`	`12`
FONT_FAMILY	轉譯字型系列選取器。	`STRING`	`STRING`	由主題決定。
CHECKBOX	顯示核取方塊。	`BOOLEAN`	`BOOLEAN`	`false`
TEXTINPUT	此元素呈現文字輸入框。	`STRING`	`STRING`	`""`
TEXTAREA	轉譯大型文字輸入區域。	`STRING`	`STRING`	`""`
SELECT_SINGLE	呈現包含預先定義值的下拉式選單。	`STRING` (針對 defaultValue 和 options.label 和 options.value)	`STRING`	未定義
SELECT_RADIO	呈現包含預先定義值的圓形按鈕選取器。	`STRING` (針對 defaultValue 和 options.label 和 options.value)	`STRING`	未定義
FILL_COLOR	呈現填滿顏色選取器。有效值為十六進位顏色代碼。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	由主題決定。
BORDER_COLOR	呈現邊框顏色選取器。有效值為十六進位顏色代碼。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	由主題決定。
AXIS_COLOR	呈現軸顏色選取器。有效值為十六進位顏色代碼。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	由主題決定。
GRID_COLOR	呈現格線顏色選取器。有效值為十六進位顏色代碼。	`STRING` \| `OBJECT<Color>`	`OBJECT<Color>`	由主題決定。
不透明度	算繪不透明度選取器，單位為 %。有效值介於 0 至 1 之間，以 0.1 為單位遞增	`NUMBER`	`NUMBER`	`1`
LINE_WEIGHT	呈現線條寬度挑選器。有效值介於 0 到 5 之間。0 會在下拉式選單中顯示為「無」。	`NUMBER`	`NUMBER`
LINE_STYLE	呈現線條樣式挑選器。可接受的預設值：`solid`、`dashed`、`dotted`、`double`。	`STRING`	`STRING`	`"solid"`
BORDER_RADIUS	呈現邊框半徑選取器。有效值為：0、1、2、3、4、5、10、15、20、25、30、40、50、60、70、80、90、100	`NUMBER`	`NUMBER`	由主題決定。
間隔	呈現間隔選取器。值為整數。	`NUMBER`	`NUMBER`	`0`

樣式元素會設定屬性中 Style 分頁中顯示的圖示面板。

樣式元素選項

部分樣式元素支援選項

options: array(options)

列舉值	選項物件
SELECT_SINGLE	{ label: `string`, value: `string` }
SELECT_RADIO	{ label: `string`, value: `string` }
間隔	{ max: `number`, min: `number` }

資料類型

物件<顏色>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<Color>

包含十六進位顏色代碼的字串值。

範例

"color": "#0000ff"

NUMBER<Opacity>

0 到 1 之間的數字值，以 0.10 為單位遞增

範例

"opacity": 0.2

InteractionType

InteractionTypes 會設定 Data 樣式中可用的互動選項「資源面板」分頁目前僅支援 "FILTER"。

列舉值	說明
`"FILTER"`	允許使用者將圖表設為篩選條件。

設定範例

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "id": "metric",
        "label": "metric",
        "type": "METRIC",
        "options": {
          "min": 1,
          "max": 3
        }
      }
    ]
  }],
  "style": [
    {
      "id": "colors",
      "label": "Highlight Colors",
      "elements": [
        {
          "id": "accentColor",
          "label": "Accent Color",
          "type": "SELECT_SINGLE",
          "defaultValue": "rain",
          "options": [
            {
              "label": "Summer",
              "value": "summer"
            },
            {
              "label": "Fall",
              "value": "fall"
            }
          ]
        },
        {
          "id": "reverseColor",
          "label": "Show reverse color",
          "defaultValue": false,
          "type": "CHECKBOX"
        },
        {
          "id": "fillColor",
          "label": "Fill Color",
          "defaultValue": {
            "color": "#0000ff"
          },
          "type": "FILL_COLOR"
        },
        {
          "id": "textOpacity",
          "label": "Text Opacity",
          "defaultValue": 0.2,
          "type": "OPACITY"
        },
        {
          "id": "customText",
          "label": "Custom Text",
          "defaultValue": "0.2",
          "type": "TEXTINPUT"
        }
      ]
    },
    {
      "id": "text",
      "label": "Highlight Text",
      "elements": [
        {
          "id": "textFontSize",
          "label": "Font size",
          "defaultValue": 10,
          "type": "FONT_SIZE"
        },
        {
          "id": "font",
          "label": "Font family",
          "defaultValue": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}