資料標籤

OrbCharts 有一個特殊的標籤系統，能夠將多個資料標記到各別標籤上，使得我們可以透過 OrbCharts 的操作可以使用標籤名稱來選取元素，具體的用途有以下三個：

  1. 圖表元素的顏色呈現

  2. 在圖表上顯示標籤文字（例如：圖例、圖軸… 等上面的標籤文字）

  3. 選取所要 Highlight 的元素

資料上可以標記的標籤跟資料結構的設計息息相關，所以依照 6 種資料格式的設計不同，有各自可以使用的標籤以及標記方式，以下將各別說明，請依所需選擇閱讀即可。

TIP

OrbCharts 的設計當中，系統內部會給予每一筆資料預設標籤（符合資料結構的），所以手動加註標籤並不是一個必要的工作；但大多數的時候，我們需要的圖表上會需要一些文字來標示在圖形元素上。比如說我們可能會需要「圖例」以說明各個顏色代表什麼樣類別的資料，我們可能需要在長條圖上加上 X 軸並在圖軸上寫上每個長條圖形是什麼資料… 等等。所以我們會建議將此章節視為一個必要學習及操作的內容。

Series

Series 資料類別有有 label 和 seriesLabels 兩種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。

  • 範例：

data$ 的資料在未加註 label 之前的格式範例：

[
  [
    50000,
    40000,
    30000
  ]
]

加註 label 之後的範例：

[
  [
    {
      label: '台北',
      value: 50000
    },
    {
      label: '台中',
      value: 40000
    },
    {
      label: '高雄',
      value: 30000
    }
  ]
]

seriesLabels

  • API：dataFormatter$

  • 說明：別來標記 data$ 的資料內陣列資料的標籤，每一個標籤會對應到一組陣列資料（關於 data$ 資料結構設計想詳見 API 文件）。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next([
  [ 80, 120, 45 ],
  [ 50, 30, 15, 28 ],
  [ 55, 13, 38, 10, 5 ]
])
// dataFormatter$
chart.dataFormatter$.next({
  seriesLabels: ['關鍵字', '人物', '品牌']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})
  1. dataFormatter$ 的 seriesLabels 分別使用了三個標籤來對應三組陣列資料：

'關鍵字' -> [ 80, 120, 45 ]

'人物' -> [ 50, 30, 15, 28 ]

'品牌' -> [ 55, 13, 38, 10, 5 ]

常用情況如圖例 - 比如 SeriesLegend，會將這三個標籤依顏色及名稱繪製出來。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 seriesLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> 關鍵字

'#6794DC' -> 人物

'#6771DC' -> 品牌

Grid

Grid 資料類別有有 label、rowLabels 和 columnLabels 三種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。

  • 範例：

data$ 的資料在未加註 label 之前的格式範例：

[
  [ 55, 80, 50, 11, 150 ],
  [ 35, 40, 15, 65, 120 ]
]

加註 label 之後的範例：

[
  [
    {
      label: '進口-Q1',
      value: 55
    },
    {
      label: '進口-Q2',
      value: 80
    },
    {
      label: '進口-Q3',
      value: 50
    },
    {
      label: '進口-Q4',
      value: 11
    }
  ],
  [
    {
      label: '出口-Q1',
      value: 35
    },
    {
      label: '出口-Q2',
      value: 40
    },
    {
      label: '出口-Q3',
      value: 15
    },
    {
      label: '出口-Q4',
      value: 65
    }
  ],
]

rowLabels, columnLabels

  • API：dataFormatter$

  • 說明：別來標記 data$ 的資料內的「欄」及「列」陣列資料的標籤，每一個標籤會對應到一組陣列資料（關於 data$ 資料結構設計想詳見 API 文件）。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next([
  [ 55, 80, 50, 11 ],
  [ 35, 40, 15, 65 ]
])
// dataFormatter$
chart.dataFormatter$.next({
  seriesDirection: 'row', // 非必要
  rowLabels: ['進口', '出口'],
  columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC']
    }
  }
})
  1. dataFormatter$ 的 rowLabels 分別使用了兩個標籤來對應兩組「列」陣列資料：

'進口' -> [ 55, 80, 50, 11 ]

'出口' -> [ 35, 40, 15, 65 ]

常用情況如圖例 - 比如 GridLegend，會將這兩個標籤依顏色及名稱繪製出來。

  1. dataFormatter$ 的 columnLabels 分別使用了四個標籤來對應兩組「欄」陣列資料：

'Q1' -> [ 55, 35 ]

'Q2' -> [ 80, 40 ]

'Q3' -> [ 50, 15 ]

'Q4' -> [ 11, 65 ]

常用情況如圖軸 - 比如 GroupAxis，會將標籤文字（Q1~Q4）分別放到 X 軸的刻度文字上。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 seriesLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> 進口

'#6794DC' -> 出口

TIP

在 Grid 資料類別中有 series 和 group 資料的概念，當我們透過 seriesDirection 的設定可以設定「列」或者「欄」為 series，則另一個就會是 group，主要目的是透過 seriesDirection 的設定可以控制繪圖映射規則的轉置。

在以上述的範例作為說明，如果我們將 seriesDirection 設為 column（預設為 row），當資料結構被轉置之後，除了繪圖出來的圖型被改變了之外，顏色標籤的規則也重新對應到新的標籤上了：

'#67B7DC' -> Q1

'#6794DC' -> Q2

'#6771DC' -> Q3

'#8067DC' -> Q4

註：原本範例中顏色標籤中只有設定兩個，當不足夠使用的時候系統會有預設顏色標籤的規則。

MultiGrid

Grid 資料類別有有 label、rowLabels 和 columnLabels 三種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。其標註方式和 Grid 一致（資料格式本身略有不同），請參考 Grid 章節的說明即可。

rowLabels, columnLabels

  • API：dataFormatter$

  • 說明：別來標記 data$ 的資料內的「欄」及「列」陣列資料的標籤，每一個標籤會對應到一組陣列資料（關於 data$ 資料結構設計想詳見 API 文件）。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next([
  // 第一組 Grid 資料
  [
    [ 55, 80, 50, 11 ],
    [ 35, 40, 15, 65 ]
  ],
  // 第二組 Grid 資料
  [
    [ 6500, 7000, 9000, 11000 ],
    [ 2500, 4000, 2500, 7500 ]
  ]
])
// dataFormatter$
chart.dataFormatter$.next({
  gridList: [
    {
      seriesDirection: 'row', // 非必要
      rowLabels: ['進口數量', '出口數量'],
      columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    {
      seriesDirection: 'row', // 非必要
      rowLabels: ['進口金額', '出口金額'],
      columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
    }
  ]
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC']
    }
  }
})
  1. dataFormatter$ 的 rowLabels 分別使用了共 4 個標籤來對應 4 組「列」陣列資料：

'進口數量' -> [ 55, 80, 50, 11 ]

'出口數量' -> [ 35, 40, 15, 65 ]

'進口金額' -> [ 6500, 7000, 9000, 11000, 8000 ]

'出口金額' -> [ 2500, 4000, 2500, 7500, 9000 ]

常用情況如圖例 - 比如 MultiGridLegend，會將這兩個標籤依顏色及名稱繪製出來。

  1. dataFormatter$ 的 columnLabels 共設定了 8 個標籤，不過這邊有一個特別的機制，也就是當 columnLabels 的值相同的時候會被合併起來，所以共會有 4 個標籤來對應 4 組「欄」陣列資料：

'Q1' -> [ 55, 35, 6500, 2500 ]

'Q2' -> [ 80, 40, 7000, 4000 ]

'Q3' -> [ 50, 15, 11000, 7500 ]

'Q4' -> [ 11, 65, 8000, 9000 ]

常用情況如圖軸 - 比如 MultiGroupAxis，會將標籤文字（Q1~Q4）分別放到 X 軸的刻度文字上。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 seriesLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> '進口數量'

'#6794DC' -> '出口數量'

'#6771DC' -> '進口金額'

'#8067DC' -> '出口金額'

MultiValue

MultiValue 資料類別有有 label 和 categoryLabel 兩種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。

  • 範例：

data$ 的資料在未加註 label 之前的格式範例：

[
  [ 25, 30, 15 ],
  [ 55, 60, 40 ],
  [ 45, 55, 30 ],
  [ 75, 35, 30 ],
  [ 65, 25, 5 ],
]

加註 label 之後的範例：

[
  {
    value: [ 25, 30, 15 ],
    label: 'Item 1'
  },
  {
    value: [ 55, 60, 40 ],
    label: 'Item 2'
  },
  {
    value: [ 45, 55, 30 ],
    label: 'Item 3'
  },
  {
    value: [ 75, 35, 30 ],
    label: 'Item 4'
  },
  {
    value: [ 65, 25, 5 ],
    label: 'Item 5'
  },
]

categoryLabels

  • API：data$

  • 說明：用來標記在各別的資料上面，可以將多筆資料標記會相同的標籤，因此每一個標籤會對應到一組陣列資料。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next([
  {
    value: [ 25, 30, 15 ],
    label: 'Item 1',
    categoryLabel: '人物'
  },
  {
    value: [ 55, 60, 40 ],
    label: 'Item 2',
    categoryLabel: '關鍵字'
  },
  {
    value: [ 45, 55, 30 ],
    label: 'Item 3',
    categoryLabel: '品牌'
  },
  {
    value: [ 75, 35, 30 ],
    label: 'Item 4',
    categoryLabel: '品牌'
  },
  {
    value: [ 65, 25, 5 ],
    label: 'Item 5',
    categoryLabel: '關鍵字'
  },
])
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['關鍵字', '人物', '品牌']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})
  1. categoryLabels 有兩個地方要同時標註，分別是 data$ 中各別在資料中標註、並且 dataFormatter$ 的 categoryLabels 必須要包含所有使用到的標籤（dataFormatter$ 的 categoryLabels 會依照陣列索引決定標籤的順序）。
標籤對應的陣列資料如下：

'關鍵字' ->

  [
    {
      value: [ 55, 60, 40 ],
      label: 'Item 2',
      categoryLabel: '關鍵字'
    },
    {
      value: [ 65, 25, 5 ],
      label: 'Item 5',
      categoryLabel: '關鍵字'
    }
  ]

'人物' ->

  [
    {
      value: [ 25, 30, 15 ],
      label: 'Item 1',
      categoryLabel: '人物'
    }
  ]

'品牌' ->

  [
    {
      value: [ 45, 55, 30 ],
      label: 'Item 3',
      categoryLabel: '品牌'
    },
    {
      value: [ 75, 35, 30 ],
      label: 'Item 4',
      categoryLabel: '品牌'
    }
  ]

常用情況如圖例 - 比如 MultiValueLegend，會將這三個標籤依顏色及名稱繪製出來。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 categoryLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> 關鍵字

'#6794DC' -> 人物

'#6771DC' -> 品牌

Relationship

Relationship 資料類別有有 label 和 categoryLabel 兩種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。

  • 範例：

data$ 的資料裡 label 是可選的，加上 label 標籤的範例：

{
  nodes: [
    {
      id: "id0",
      label: "label0",
      value: 19800000,
      categoryLabel: "category1"
    },
    {
      id: "id3",
      label: "label1",
      value: 5114269,
      categoryLabel: "category1"
    },
    {
      id: "id4",
      label: "label2",
      value: 1093200,
      categoryLabel: "category1"
    },
    {
      id: "id5",
      label: "label3",
      value: 32007217,
      categoryLabel: "category1"
    }
  ],
  edges: [
    {
      id: "id14",
      label: "label8",
      categoryLabel: "category2",
      start: "id5",
      end: "id0",
      value: 100
    },
    {
      id: "id15",
      label: "",
      categoryLabel: "category2",
      start: "id5",
      end: "id3",
      value: 100
    },
    {
      id: "id16",
      label: "",
      categoryLabel: "category2",
      start: "id5",
      end: "id4",
      value: 50
    }
  ]
}

categoryLabels

  • API：data$

  • 說明：用來標記在各別的資料上面，可以將多筆資料標記會相同的標籤，因此每一個標籤會對應到一組陣列資料。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next({
  nodes: [
    {
      id: "id0",
      label: "Company A",
      value: 19800000,
      categoryLabel: "公司"
    },
    {
      id: "id3",
      label: "Company B",
      value: 5114269,
      categoryLabel: "公司"
    },
    {
      id: "id4",
      label: "Company C",
      value: 1093200,
      categoryLabel: "公司"
    },
    {
      id: "id5",
      label: "Person A",
      value: 32007217,
      categoryLabel: "董監事"
    }
  ],
  edges: [
    {
      id: "id14",
      label: "25%",
      categoryLabel: "持股",
      start: "id5",
      end: "id0",
      value: 0.25
    },
    {
      id: "id15",
      label: "5%",
      categoryLabel: "持股",
      start: "id5",
      end: "id3",
      value: 0.05
    },
    {
      id: "id16",
      label: "5%",
      categoryLabel: "持股",
      start: "id5",
      end: "id4",
      value: 0.05
    }
  ]
})
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['公司', '董監事', '持股']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})
  1. categoryLabels 有兩個地方要同時標註，分別是 data$ 中各別在資料中標註、並且 dataFormatter$ 的 categoryLabels 必須要包含所有使用到的標籤（dataFormatter$ 的 categoryLabels 會依照陣列索引決定標籤的順序）。
標籤對應的陣列資料如下：

'公司' ->

  [
    {
      id: "id0",
      label: "Company A",
      value: 19800000,
      categoryLabel: "公司"
    },
    {
      id: "id3",
      label: "Company B",
      value: 5114269,
      categoryLabel: "公司"
    },
    {
      id: "id4",
      label: "Company C",
      value: 1093200,
      categoryLabel: "公司"
    },
  ]

'董監事' ->

  [
    {
      id: "id5",
      label: "Person A",
      value: 32007217,
      categoryLabel: "董監事"
    }
  ]

'持股' ->

  [
    {
      id: "id14",
      label: "25%",
      categoryLabel: "持股",
      start: "id5",
      end: "id0",
      value: 0.25
    },
    {
      id: "id15",
      label: "5%",
      categoryLabel: "持股",
      start: "id5",
      end: "id3",
      value: 0.05
    },
    {
      id: "id16",
      label: "5%",
      categoryLabel: "持股",
      start: "id5",
      end: "id4",
      value: 0.05
    }
  ]

常用情況如圖例 - 比如 RelationshipLegend，會將這三個標籤依顏色及名稱繪製出來。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 categoryLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> 公司

'#6794DC' -> 董監事

'#6771DC' -> 持股

Tree

Tree 資料類別有有 label 和 categoryLabel 兩種標籤可以使用。

label

  • API：data$

  • 說明：用來標記在各別的資料上面，可用作資料的標題或文字說明。

  • 範例：

data$ 的資料裡 label 是可選的，加上 label 標籤的範例：

{
  label: "Movies",
  children: [
    {
      label: "Action",
      children: [
        {
          label: "Avatar ",
          categoryLabel: "Action",
          value: "760505847",
          id: "Movies.Action.Avatar "
        },
        {
          label: "Jurassic World ",
          categoryLabel: "Action",
          value: "652177271",
          id: "Movies.Action.Jurassic World "
        },
        {
          label: "The Avengers ",
          categoryLabel: "Action",
          value: "623279547",
          id: "Movies.Action.The Avengers "
        }
      ],
      id: "Movies.Action"
    },
    {
      label: "Drama",
      children: [
        {
          label: "Titanic ",
          categoryLabel: "Drama",
          value: "658672302",
          id: "Movies.Drama.Titanic "
        },
        {
          label: "The Sixth Sense ",
          categoryLabel: "Drama",
          value: "293501675",
          id: "Movies.Drama.The Sixth Sense "
        }
      ],
      id: "Movies.Drama"
    },
    {
      label: "Adventure",
      children: [
        {
          label: "Shrek 2",
          categoryLabel: "Adventure",
          value: "436471036",
          id: "Movies.Adventure.Shrek 2"
        }
      ],
      id: "Movies.Adventure"
    }
  ],
  id: "Movies"
}

categoryLabels

  • API：data$

  • 說明：用來標記在各別的資料上面，可以將多筆資料標記會相同的標籤，因此每一個標籤會對應到一組陣列資料。

  • 範例：

我們用一組 data$, dataFormatter$, chartParams$ 的設定來說明：

// data$
chart.data$.next({
  label: "Movies",
  children: [
    {
      label: "Action",
      children: [
        {
          label: "Avatar ",
          categoryLabel: "Action",
          value: "760505847",
          id: "Movies.Action.Avatar "
        },
        {
          label: "Jurassic World ",
          categoryLabel: "Action",
          value: "652177271",
          id: "Movies.Action.Jurassic World "
        },
        {
          label: "The Avengers ",
          categoryLabel: "Action",
          value: "623279547",
          id: "Movies.Action.The Avengers "
        }
      ],
      id: "Movies.Action"
    },
    {
      label: "Drama",
      children: [
        {
          label: "Titanic ",
          categoryLabel: "Drama",
          value: "658672302",
          id: "Movies.Drama.Titanic "
        },
        {
          label: "The Sixth Sense ",
          categoryLabel: "Drama",
          value: "293501675",
          id: "Movies.Drama.The Sixth Sense "
        }
      ],
      id: "Movies.Drama"
    },
    {
      label: "Adventure",
      children: [
        {
          label: "Shrek 2",
          categoryLabel: "Adventure",
          value: "436471036",
          id: "Movies.Adventure.Shrek 2"
        }
      ],
      id: "Movies.Adventure"
    }
  ],
  id: "Movies"
})
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['Action', 'Drama', 'Adventure']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})
  1. categoryLabels 有兩個地方要同時標註，分別是 data$ 中各別在資料中標註、並且 dataFormatter$ 的 categoryLabels 必須要包含所有使用到的標籤（dataFormatter$ 的 categoryLabels 會依照陣列索引決定標籤的順序）。
標籤對應的陣列資料如下：

'Action' ->

  [
    {
      label: "Avatar ",
      categoryLabel: "Action",
      value: "760505847",
      id: "Movies.Action.Avatar "
    },
    {
      label: "Jurassic World ",
      categoryLabel: "Action",
      value: "652177271",
      id: "Movies.Action.Jurassic World "
    },
    {
      label: "The Avengers ",
      categoryLabel: "Action",
      value: "623279547",
      id: "Movies.Action.The Avengers "
    }
  ]

'Drama' ->

  [
    {
      label: "Titanic ",
      categoryLabel: "Drama",
      value: "658672302",
      id: "Movies.Drama.Titanic "
    },
    {
      label: "The Sixth Sense ",
      categoryLabel: "Drama",
      value: "293501675",
      id: "Movies.Drama.The Sixth Sense "
    }
  ]

'Adventure' ->

  [
    {
      label: "Shrek 2",
      categoryLabel: "Adventure",
      value: "436471036",
      id: "Movies.Adventure.Shrek 2"
    }
  ]

常用情況如圖例 - 比如 TreeLegend，會將這三個標籤依顏色及名稱繪製出來。

  1. chartParams$ 上在 colors[type].label 設定了一組顏色色票，依照索引對應 categoryLabels 的標籤，可以選取出圖形元素決定繪圖的顏色。

'#67B7DC' -> Action

'#6794DC' -> Drama

'#6771DC' -> Adventure