圖像編輯器 - 圖表工具使用案例

• 圖表區塊工具列說明
• 資料、內距、更新預覽說明
• 圖例 Legend
• 極座標 Coord
• 前置處理函數 Transform
• 比例尺 Scale
• 軸座標 Axis
• 圖 Geom
• 折線圖
• 基礎折線圖
• 多條折線圖
• 曲形折線圖
• 階梯折線圖
• 多條階梯折線圖
• 柱狀圖
• 基礎柱狀圖
• 分組柱狀圖
• 堆疊柱狀圖
• 區間柱狀圖
• 基礎條形圖
• 分組條形圖
• 堆疊條形圖
• 區間條形圖
• 圓餅圖
• 基礎圓餅圖
• 基礎圓環圖
• 單色南丁格爾玫瑰圖
• 多色南丁格爾玫瑰圖
• 南丁格爾玫瑰圓環圖
• 點圖
• 基礎散點圖
• 多色散點圖
• 多形多色散點圖
• 擾動點圖
• 氣泡圖
• 面積圖
• 基礎面積圖
• 堆疊面積圖
• 區間面積圖
• 片段面積圖
• 正負面積圖
• 箱型圖
• 基礎箱型圖
• 一維箱型圖
• 環狀箱型圖
• 基礎箱型圖 (有異常值)
• 蠟燭圖
• 股票圖
• 股票範圍面積圖
• 雷達圖
• 基礎雷達圖
• 曲線雷達圖
• 其它
• 路徑圖
• 更多應用範例
• 染色區域折線圖
• 折線柱狀圖

圖表區塊工具列說明

資料、內距、更新預覽說明

總圖預覽

設定值

• 資料

繪製圖表的資料源（可程式化）

• 內距

邊與內容的距離

• • 上 , 右 ,下 , 左 （舉例：40 ,40 ,95 ,80）
  • 上 , 左右 , 下 （舉例：40 ,60 ,80）
  • 上下 , 左右 （舉例：80 ,60）
  • 上右下左 （舉例：50）

• 更新預覽

將設定值重新繪製上圖表區塊（更新圖表區塊）

圖例 Legend

預覽圖

圖例 Legend - 設定值

一般

• • 啟用
    • ☑ 啟用圖示
    • ☐ 不啟用圖示
  •  
  • 自動換行
    • ☑ 自動換行 
    • ☐ 不自動換行
  •  
  • 欄位（填入資料變數來做圖示標準 - 必填欄位）
  • 位置
    • 上
    • 左
    • 右
    • 下
  • 排版
    • 垂直（圖示以垂直呈現）
    • 水平（圖示以水平呈現） 
  • 水平偏移量
    • 往右偏移為 正
    • 往左偏移為 負 
    • 舉例: 30 （往右偏移 30px ）
  • 垂直偏移量
    • 往下偏移為 正
    • 往上偏移為 負
    • 舉例: -30 （往上偏移 30px）
  • 圖示 （呈現圖示的樣式）
  • 水平間距 （圖示左右間距）
  • 垂直間距 （圖示上下間距）
  • 寬度 （圖示寬度）

文字樣式

• • 對齊 （字體對齊方向）
  • 顏色 （字體顏色）
  • 大小 （字體大小）
  • 粗體 （字體粗細）
  • 旋轉 （字體旋轉）
  • 基準線 

標題

• • 啟用
    • ☑ 啟用
    • ☐ 不啟用
  • 對齊（標題對齊方向）
  • 顏色（標題顏色）
  • 大小（標題大小）
  • 粗體（標題粗細）
  • 旋轉（旋轉角度）
  • 基準線

背景

• • 填滿顏色（背景顏色）
  • 透明度（背景透明度）
  • 邊框顏色（邊框顏色）
  • 邊框透明色（邊框透明色）
  • 邊框粗細（邊框粗細寬度）
  • 圓角大小
  • 整體透明度

極座標 Coord

預覽圖

極座標 Coord - 設定值

• 類型

• • 直角坐標系（例如：折線圖、柱狀圖）

  • 極坐標系（例如：雷達圖、玫瑰圖）

  • 圓餅圖

  • 螺旋坐標系

• 起始角度

• 結束角度

• 空心圓半徑（ 設定值 0 ~ 1 ）

• 實心圓半徑（ 設定值 0 ~ 1 ）

• 反轉（反轉X 或 Y 的起始、結束值reflect）

• 轉置（轉置X軸和Y軸 ，預設值 false）

前置處理函數 Transform

預覽圖

前置處理函數 Transform - 設定值

類型

比例尺 Scale

預覽圖

比例尺 Scale - 設定值

• 欄位 （填入欄位值來做比例尺設定）

• 類型

• 範圍（與起始點的間距，資料顯示的長度(後-前)）

 範圍0 ~ 1 ，格式： 0,1 ，舉例：0.2~0.8

• 別名（該數據字段的顯示別名，一般用於將字段的英文名稱轉換成中文名）

• 刻度值（ 刻度數量、刻度間距、刻度內容 三擇一設定，若設定到兩項以下方的項目為主）

  • 刻度數量 （幾個刻度數量，輸入後會自動優化數量）

  • 刻度間距 （刻度與刻度之間的距離,若類型為 time 和 timeCat 以秒為單位，例如：86400）

  • 刻度內容 （直接設定刻度內容）

• 優化數據範圍 （☑ 優化數據範圍，☐ 不優化 ）

• 最小值 （比例尺的最小值）

• 最大值 （比例尺的最大值）

• log基數

• 指數

• 分類值 （cat 限定）

• 時間格式（time 和 timeCat 限定）

  • YYYY （西元年分）

  • MM （月份 , 01 ~ 12，4個M = 英文全稱 , 3個M = 英文縮寫）

  • DD （日期 ,01 ~ 31 ）

  • ddd （星期 , 一 ~ 七，4個d = 英文全稱 , 3個d = 英文縮寫）

  • HH （小時 , 0 ~ 24）

  • mm （分鐘 , 0 ~ 59）

  • ss （秒鐘 , 0 ~ 59）

  • sss （毫秒 , 0 ~ 999）

   範例：YYYY-MM-DD(ddd)
   結果：2018-01-01(MON)

• 格式化函數 （程式化比例尺上的數值，例如：千分位）

軸座標 Axis

預覽圖

軸座標 Axis - 設定值

一般

☑ 開啟軸線
☐ 隱藏軸線，所有效果都會隱藏掉

軸線

標籤

☑ 軸座標內容過多會自動傾斜呈現，3點鐘方向為0度
☐ 一律水平呈現

標題

刻度線

次要刻度線（刻度與刻度中間的小刻度為次要刻度線，若值為空則不顯示）

網格

☑ 隱藏
☐ 不隱藏

☑ 隱藏
☐ 不隱藏

圖 Geom

預覽圖

圖 Geom - 設定值

堆疊

分組

擾動

對稱

折線圖

基礎折線圖

        折線圖數據是遞增還是遞減、增減的速率、增減的規律（週期性、螺旋性等）、峰值等特徵都可以清晰地反映出來。所以，折線圖常用來分析數據隨時間的變化趨勢，也可用來分析多組數據隨時間變化的相互作用和相互影響。例如可用來分析某類商品或是某幾類相關的商品隨時間變化的銷售情況，從而進一步預測未來的銷售情況。在折線圖中，一般水平軸（X軸）用來表示時間的推移，並且間隔相同；而垂直軸（Y軸）代表不同時刻的數據的大小。

預覽圖

設定值

• 資料源

[
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 }
]

• 內距

40,20,50,50

• 比例尺Scale

Year 比例尺（ X軸 ）

Value 比例尺（ Y軸 ）

• 圖 Geom

線圖（ Line ）

點圖（ point ）

多條折線圖

雙折線圖，用於比對兩組數據的趨勢。

預覽圖

設定值

• 資料源

[{
  "month": "Jan",
  "city": "Tokyo",
  "temperature": 7
}, {
  "month": "Jan",
  "city": "London",
  "temperature": 3.9
}, {
  "month": "Feb",
  "city": "Tokyo",
  "temperature": 6.9
}, {
  "month": "Feb",
  "city": "London",
  "temperature": 4.2
}, {
  "month": "Mar",
  "city": "Tokyo",
  "temperature": 9.5
}, {
  "month": "Mar",
  "city": "London",
  "temperature": 5.7
}, {
  "month": "Apr",
  "city": "Tokyo",
  "temperature": 14.5
}, {
  "month": "Apr",
  "city": "London",
  "temperature": 8.5
}, {
  "month": "May",
  "city": "Tokyo",
  "temperature": 18.4
}, {
  "month": "May",
  "city": "London",
  "temperature": 11.9
}, {
  "month": "Jun",
  "city": "Tokyo",
  "temperature": 21.5
}, {
  "month": "Jun",
  "city": "London",
  "temperature": 15.2
}, {
  "month": "Jul",
  "city": "Tokyo",
  "temperature": 25.2
}, {
  "month": "Jul",
  "city": "London",
  "temperature": 17
}, {
  "month": "Aug",
  "city": "Tokyo",
  "temperature": 26.5
}, {
  "month": "Aug",
  "city": "London",
  "temperature": 16.6
}, {
  "month": "Sep",
  "city": "Tokyo",
  "temperature": 23.3
}, {
  "month": "Sep",
  "city": "London",
  "temperature": 14.2
}, {
  "month": "Oct",
  "city": "Tokyo",
  "temperature": 18.3
}, {
  "month": "Oct",
  "city": "London",
  "temperature": 10.3
}, {
  "month": "Nov",
  "city": "Tokyo",
  "temperature": 13.9
}, {
  "month": "Nov",
  "city": "London",
  "temperature": 6.6
}, {
  "month": "Dec",
  "city": "Tokyo",
  "temperature": 9.6
}, {
  "month": "Dec",
  "city": "London",
  "temperature": 4.8
}]

• 內距

40,20,50,50

• 比例尺 Scale

temperature 比例尺 （ X軸 ）

• 圖 Geom

點圖（ point ）

線圖（ Line ）

曲形折線圖

雙折線圖，用於比對兩組數據的趨勢。

預覽圖

設定值

• 資料源

[{
  "month": "Jan",
  "city": "Tokyo",
  "temperature": 7
}, {
  "month": "Jan",
  "city": "London",
  "temperature": 3.9
}, {
  "month": "Feb",
  "city": "Tokyo",
  "temperature": 6.9
}, {
  "month": "Feb",
  "city": "London",
  "temperature": 4.2
}, {
  "month": "Mar",
  "city": "Tokyo",
  "temperature": 9.5
}, {
  "month": "Mar",
  "city": "London",
  "temperature": 5.7
}, {
  "month": "Apr",
  "city": "Tokyo",
  "temperature": 14.5
}, {
  "month": "Apr",
  "city": "London",
  "temperature": 8.5
}, {
  "month": "May",
  "city": "Tokyo",
  "temperature": 18.4
}, {
  "month": "May",
  "city": "London",
  "temperature": 11.9
}, {
  "month": "Jun",
  "city": "Tokyo",
  "temperature": 21.5
}, {
  "month": "Jun",
  "city": "London",
  "temperature": 15.2
}, {
  "month": "Jul",
  "city": "Tokyo",
  "temperature": 25.2
}, {
  "month": "Jul",
  "city": "London",
  "temperature": 17
}, {
  "month": "Aug",
  "city": "Tokyo",
  "temperature": 26.5
}, {
  "month": "Aug",
  "city": "London",
  "temperature": 16.6
}, {
  "month": "Sep",
  "city": "Tokyo",
  "temperature": 23.3
}, {
  "month": "Sep",
  "city": "London",
  "temperature": 14.2
}, {
  "month": "Oct",
  "city": "Tokyo",
  "temperature": 18.3
}, {
  "month": "Oct",
  "city": "London",
  "temperature": 10.3
}, {
  "month": "Nov",
  "city": "Tokyo",
  "temperature": 13.9
}, {
  "month": "Nov",
  "city": "London",
  "temperature": 6.6
}, {
  "month": "Dec",
  "city": "Tokyo",
  "temperature": 9.6
}, {
  "month": "Dec",
  "city": "London",
  "temperature": 4.8
}]

• 內距

40,20,50,50

• 比例尺Scale

temperature 比例尺（ X軸 ）

• 圖 Geom

線圖（ Line ）

點圖（ point ）

階梯折線圖

階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。

預覽圖

設定值

• 資料源

[{
  month: 'Jan',
  value: 51
}, {
  month: 'Feb',
  value: 91
}, {
  month: 'Mar',
  value: 34
}, {
  month: 'Apr',
  value: 47
}, {
  month: 'May',
  value: 63
}, {
  month: 'June',
  value: 58
}, {
  month: 'July',
  value: 56
}, {
  month: 'Aug',
  value: 77
}, {
  month: 'Sep',
  value: 99
}, {
  month: 'Oct',
  value: 106
}, {
  month: 'Nov',
  value: 88
}, {
  month: 'Dec',
  value: 56
}];

• 內距

40,40,60,60

• 比例尺 Scale

month 比例尺 （ X軸 ）

value 比例尺 （ Y軸 ）

• 圖 Geom

點圖（ point ）

線圖（ Line ）

多條階梯折線圖

階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成分段步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能 很有用。例如，奶製品價格上漲，汽油，稅率，利率等。

預覽圖

設定值

• 資料源

[{
  "month": "Jan",
  "key": "series1",
  "value": 125
}, {
  "month": "Jan",
  "key": "series2",
  "value": 51
}, {
  "month": "Feb",
  "key": "series1",
  "value": 132
}, {
  "month": "Feb",
  "key": "series2",
  "value": 91
}, {
  "month": "Mar",
  "key": "series1",
  "value": 141
}, {
  "month": "Mar",
  "key": "series2",
  "value": 34
}, {
  "month": "Apr",
  "key": "series1",
  "value": 158
}, {
  "month": "Apr",
  "key": "series2",
  "value": 47
}, {
  "month": "May",
  "key": "series1",
  "value": 133
}, {
  "month": "May",
  "key": "series2",
  "value": 63
}, {
  "month": "June",
  "key": "series1",
  "value": 143
}, {
  "month": "June",
  "key": "series2",
  "value": 58
}, {
  "month": "July",
  "key": "series1",
  "value": 176
}, {
  "month": "July",
  "key": "series2",
  "value": 56
}, {
  "month": "Aug",
  "key": "series1",
  "value": 194
}, {
  "month": "Aug",
  "key": "series2",
  "value": 77
}, {
  "month": "Sep",
  "key": "series1",
  "value": 115
}, {
  "month": "Sep",
  "key": "series2",
  "value": 99
}, {
  "month": "Oct",
  "key": "series1",
  "value": 134
}, {
  "month": "Oct",
  "key": "series2",
  "value": 106
}, {
  "month": "Nov",
  "key": "series1",
  "value": 110
}, {
  "month": "Nov",
  "key": "series2",
  "value": 88
}, {
  "month": "Dec",
  "key": "series1",
  "value": 91
}, {
  "month": "Dec",
  "key": "series2",
  "value": 56
}]

• 內距

40,40,60,60

• 圖 Geom

線圖（ Line ）

柱狀圖

基礎柱狀圖

柱狀圖有別於直方圖，柱狀圖無法顯示數據在一個區間內的連續變化趨勢。柱狀圖描述的是分類數據，回答的是每一個分類中“有多少？”這個問題。需要注意的是， 當柱狀圖顯示的分類很多時會導致分類名附加等顯示問題。

預覽圖

設定值

• 資料源

[{
  year: '1951 年',
  sales: 38
}, {
  year: '1952 年',
  sales: 52
}, {
  year: '1956 年',
  sales: 61
}, {
  year: '1957 年',
  sales: 145
}, {
  year: '1958 年',
  sales: 48
}, {
  year: '1959 年',
  sales: 38
}, {
  year: '1960 年',
  sales: 38
}, {
  year: '1962 年',
  sales: 38
}]

• 內距

40,40,60,60

• 圖 Geom

柱狀圖（ interval ）

分組柱狀圖

預覽圖

設定值

• 資料源

[{
  "name": "London",
  "月份": "Jan.",
  "月均降雨量": 18.9
}, {
  "name": "London",
  "月份": "Feb.",
  "月均降雨量": 28.8
}, {
  "name": "London",
  "月份": "Mar.",
  "月均降雨量": 39.3
}, {
  "name": "London",
  "月份": "Apr.",
  "月均降雨量": 81.4
}, {
  "name": "London",
  "月份": "May",
  "月均降雨量": 47
}, {
  "name": "London",
  "月份": "Jun.",
  "月均降雨量": 20.3
}, {
  "name": "London",
  "月份": "Jul.",
  "月均降雨量": 24
}, {
  "name": "London",
  "月份": "Aug.",
  "月均降雨量": 35.6
}, {
  "name": "Berlin",
  "月份": "Jan.",
  "月均降雨量": 12.4
}, {
  "name": "Berlin",
  "月份": "Feb.",
  "月均降雨量": 23.2
}, {
  "name": "Berlin",
  "月份": "Mar.",
  "月均降雨量": 34.5
}, {
  "name": "Berlin",
  "月份": "Apr.",
  "月均降雨量": 99.7
}, {
  "name": "Berlin",
  "月份": "May",
  "月均降雨量": 52.6
}, {
  "name": "Berlin",
  "月份": "Jun.",
  "月均降雨量": 35.5
}, {
  "name": "Berlin",
  "月份": "Jul.",
  "月均降雨量": 37.4
}, {
  "name": "Berlin",
  "月份": "Aug.",
  "月均降雨量": 42.4
}]

• 內距

40, 40, 100, 60

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

堆疊柱狀圖

預覽圖

設定值

• 資料源

[{
  name: 'London',
  'Jan.': 18.9,
  'Feb.': 28.8,
  'Mar.': 39.3,
  'Apr.': 81.4,
  'May': 47,
  'Jun.': 20.3,
  'Jul.': 24,
  'Aug.': 35.6
}, {
  name: 'Berlin',
  'Jan.': 12.4,
  'Feb.': 23.2,
  'Mar.': 34.5,
  'Apr.': 99.7,
  'May': 52.6,
  'Jun.': 35.5,
  'Jul.': 37.4,
  'Aug.': 42.4
}]

• 內距

40, 40, 100, 60

• 前置處理函數 Transform

字串展開（fold）

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

區間柱狀圖

預覽圖

設定值

• 資料源

[{
  x: '分類一',
  y: [76, 100]
}, {
  x: '分類二',
  y: [56, 108]
}, {
  x: '分類三',
  y: [38, 129]
}, {
  x: '分類四',
  y: [58, 155]
}, {
  x: '分類五',
  y: [45, 120]
}, {
  x: '分類六',
  y: [23, 99]
}, {
  x: '分類七',
  y: [18, 56]
}, {
  x: '分類八',
  y: [18, 34]
}]

• 內距

40, 40, 60, 60

• 圖 Geom

柱狀圖（ interval ）

基礎條形圖

預覽圖

設定值

• 資料源

[{
  country: '巴西',
  population: 18203
}, {
  country: '印尼',
  population: 23489
}, {
  country: '美国',
  population: 29034
}, {
  country: '印度',
  population: 104970
}, {
  country: '中国',
  population: 131744
}]

• 內距

40, 60, 60, 70

• 圖 Geom

柱狀圖（ interval ）

• 極坐標 Coord

分組條形圖

預覽圖

設定值

• 資料源

[{
  "label": "Mon.",
  "type": "series1",
  "value": 2800
}, {
  "label": "Mon.",
  "type": "series2",
  "value": 2260
}, {
  "label": "Tues.",
  "type": "series1",
  "value": 1800
}, {
  "label": "Tues.",
  "type": "series2",
  "value": 1300
}, {
  "label": "Wed.",
  "type": "series1",
  "value": 950
}, {
  "label": "Wed.",
  "type": "series2",
  "value": 900
}, {
  "label": "Thur.",
  "type": "series1",
  "value": 500
}, {
  "label": "Thur.",
  "type": "series2",
  "value": 390
}, {
  "label": "Fri.",
  "type": "series1",
  "value": 170
}, {
  "label": "Fri.",
  "type": "series2",
  "value": 100
}]

• 內距

40, 60, 80, 70

• 軸座標 Axis

value（Y軸）

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

堆疊條形圖

預覽圖

設定值

• 資料源

[{
  'State': 'WY',
  '小於5歲': 25635,
  '5至13歲': 1890,
  '14至17歲': 9314
}, {
  'State': 'DC',
  '小於5歲': 30352,
  '5至13歲': 20439,
  '14至17歲': 10225
}, {
  'State': 'VT',
  '小於5歲': 38253,
  '5至13歲': 42538,
  '14至17歲': 15757
}, {
  'State': 'ND',
  '小於5歲': 51896,
  '5至13歲': 67358,
  '14至17歲': 18794
}, {
  'State': 'AK',
  '小於5歲': 72083,
  '5至13歲': 85640,
  '14至17歲': 22153
}]

• 內距

40, 60, 80, 70

• 前置處理函數 Transform

字串展開（fold）

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

區間條形圖

預覽圖

設定值

• 資料源

[{
  profession: '兩年制副學士學位',
  highest: 110000,
  minimum: 23000,
  mean: 56636
}, {
  profession: '執法與救火',
  highest: 120000,
  minimum: 18000,
  mean: 66625
}, {
  profession: '教育學',
  highest: 125000,
  minimum: 24000,
  mean: 72536
}, {
  profession: '心理學',
  highest: 130000,
  minimum: 22500,
  mean: 75256
}, {
  profession: '計算機科學',
  highest: 131000,
  minimum: 23000,
  mean: 77031
}]

• 內距

20, 80, 50, 150

• 前置處理函數 Transform

數據加工（map）

function callback(row) {
  row.range = [row.minimum, row.highest];
  return row;
}

• 圖 Geom

柱狀圖（ interval ）

• 極坐標 Coord

圓餅圖

基礎圓餅圖

預覽圖

設定值

• 資料源

[{
  item: '事例一',
  count: 40,
  percent: 0.4
}, {
  item: '事例二',
  count: 21,
  percent: 0.21
}, {
  item: '事例三',
  count: 17,
  percent: 0.17
}, {
  item: '事例四',
  count: 13,
  percent: 0.13
}, {
  item: '事例五',
  count: 9,
  percent: 0.09
}]

• 內距

20, 20, 50, 20

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

基礎圓環圖

環圖，其本質是餅圖將中間區域挖空。

　　餅圖的整體性太強，我們會將注意力集中在比較餅圖內各個扇形之間佔整體比重的關係。但如果我們將兩個餅圖放在一起，餅圖很難同時對比兩個圖。環圖在解決上述問題時，採用了讓我們更關注長度而不是面積的做法。這樣我們就能相對簡單的對比不同的環圖。同時環圖相對於餅圖空間的利用率更高，比如我們可以使用它的空心區域顯示文本信息，比如標題等。

預覽圖

設定值

• 資料源

[{
  item: '事例一',
  count: 40,
  percent: 0.4
}, {
  item: '事例二',
  count: 21,
  percent: 0.21
}, {
  item: '事例三',
  count: 17,
  percent: 0.17
}, {
  item: '事例四',
  count: 13,
  percent: 0.13
}, {
  item: '事例五',
  count: 9,
  percent: 0.09
}]

• 內距

20, 20, 50, 20

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

單色南丁格爾玫瑰圖

南丁格爾玫瑰圖，又名雞冠花圖、極坐標區域圖，是南丁格爾在克里米亞戰爭期間提交的一份關於士兵死傷的報告時發明的一種圖表,是在極坐標下繪製的柱狀圖，使用圓弧的半徑長短表示數據的大小（數量的多少）。

由於半徑和面積的關係是平方的關係，南丁格爾玫瑰圖會將數據的比例大小誇大，尤其適合對比大小相近的數值；由於圓形有周期的特性，所以玫瑰圖也適用於表示一個週期內的時間概念，比如星期、月份。

預覽圖

設定值

• 資料源

[{
  year: '2001',
  population: 41.8
}, {
  year: '2002',
  population: 38
}, {
  year: '2003',
  population: 33.7
}, {
  year: '2004',
  population: 30.7
}, {
  year: '2005',
  population: 25.8
}, {
  year: '2006',
  population: 31.7
}, {
  year: '2007',
  population: 33
}, {
  year: '2008',
  population: 46
}, {
  year: '2009',
  population: 38.3
}, {
  year: '2010',
  population: 28
}, {
  year: '2011',
  population: 42.5
}, {
  year: '2012',
  population: 30.3
}]

• 內距

60, 40, 60, 50

• 軸座標 Axis

population（ Y軸 ）

• 圖 Geom

柱狀圖（ interval ）

• 極坐標 Coord

多色南丁格爾玫瑰圖

預覽圖

設定值

• 資料源

[{
  year: '2001',
  population: 41.8
}, {
  year: '2002',
  population: 38
}, {
  year: '2003',
  population: 33.7
}, {
  year: '2004',
  population: 30.7
}, {
  year: '2005',
  population: 25.8
}, {
  year: '2006',
  population: 31.7
}, {
  year: '2007',
  population: 33
}, {
  year: '2008',
  population: 46
}, {
  year: '2009',
  population: 38.3
}, {
  year: '2010',
  population: 28
}, {
  year: '2011',
  population: 42.5
}, {
  year: '2012',
  population: 30.3
}]

• 內距

 0

• 軸座標 Axis

population（ Y軸 ）

year（ X軸 ）

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

南丁格爾玫瑰圓環圖

預覽圖

設定值

• 資料源

[{
  year: '2001',
  population: 41.8
}, {
  year: '2002',
  population: 38
}, {
  year: '2003',
  population: 33.7
}, {
  year: '2004',
  population: 30.7
}, {
  year: '2005',
  population: 25.8
}, {
  year: '2006',
  population: 31.7
}, {
  year: '2007',
  population: 33
}, {
  year: '2008',
  population: 46
}, {
  year: '2009',
  population: 38.3
}, {
  year: '2010',
  population: 28
}, {
  year: '2011',
  population: 42.5
}, {
  year: '2012',
  population: 30.3
}]

• 內距

 0

• 軸座標 Axis

population（ Y軸 ）

year（ X軸 ）

• 圖 Geom

柱狀圖（ interval ）

• 圖示 Legend

• 極坐標 Coord

點圖

基礎散點圖

　　通過觀察散點圖上數據點的分佈情況，我們可以推斷出變量間的相關性。如果變量之間不存在相互關係，那麼在散點圖上就會表現為隨機分佈的離散的點，如果存在某種相關性，那麼大部分的數據點就會相對密集並以某種趨勢呈現。數據的相關關係主要分為：正相關（兩個變量值同時增長）、負相關（一個變量值增加另一個變量值下降）、不相關、線性相關、指數相關等，表現在散點圖上的大致分佈如下圖所示。那些離點集群較遠的點我們稱為離群點或者異常點。

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]

• 內距

40, 40, 60, 60

• 圖 Geom

點圖（point）

多色散點圖

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]

• 內距

40, 40, 60, 60

• 圖 Geom

點圖（point）

多形多色散點圖

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/scatter.json
（ 資料來源：AntV ）
格式：
[
{gender: "female",height: 161.2,weight: 51.6,},
{gender: "female",height: 167.5,weight: 59,},
......
]

• 內距

40, 40, 60, 60

• 圖 Geom

點圖（point）

擾動點圖

圖片僅供參考，此點圖會浮動

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/dv-grades.json
（ 資料來源：AntV ）
格式：
[
{Class: "Summer 2013",Grade: "C",Score: 72.5,},
{Class: "Summer 2013",Grade: "C",Score: 77.5,},
......
]

• 內距

40, 40, 60, 60

• 比例尺 Scale

Class（X軸）

• 軸座標 Axis

Score（ X軸 ）

Class（ Y軸 ）

• 圖 Geom

點圖（point）

• 圖示 Legend

氣泡圖

圖片僅供參考，此點圖會浮動

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/bubble.json
（ 資料來源：AntV ）
格式：
[
{continent: "Americas",Country: "Argentina",LifeExpectancy: 75.32,GDP: 12779.37964,Population: 40301927,},
{continent: "Americas",Country: "Brazil",LifeExpectancy: 72.39,GDP: 9065.800825,Population: 190010647,},
......
]

• 內距

40, 40, 60, 60

• 比例尺 Scale

GDP（X軸）

function formatter(value) {
return (value / 1000).toFixed(0) + 'k';
}

• 圖 Geom

點圖（point）

• 圖示 Legend

面積圖

基礎面積圖

面積圖用於估計數量隨時間而變化的程度，也可用於引起人們對總值趨勢的注意。他們最常用於表現趨勢和關係，而不是傳達特定的值。

預覽圖

設定值

• 資料源

[{
  year: '1991',
  value: 15468
}, {
  year: '1992',
  value: 16100
}, {
  year: '1993',
  value: 15900
}, {
  year: '1994',
  value: 17409
}, {
  year: '1995',
  value: 17000
}, {
  year: '1996',
  value: 31056
}, {
  year: '1997',
  value: 31982
}, {
  year: '1998',
  value: 32040
}, {
  year: '1999',
  value: 33233
}]

• 內距

40,40, 60, 60

• 比例尺 Scale

year 比例尺 （ X軸 ）

value 比例尺 （ Y軸 ）

function formatter(val) {
  return (val / 10000).toFixed(1) + 'k';
}

• 圖 Geom

區域圖（ area ）

線圖（ Line ）

堆疊面積圖

和基本面積圖一樣，唯一的區別就是圖上每一個數據集的起點不同，起點是基於前一個數據集的，用於顯示每個數值所佔大小隨時間或類別變化的趨勢線，展示的是部分與整體的關係。

層疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。各個疊起來的面積表示各個數據量的大小，這些堆疊起來的面積圖在表現大數據的總量分量的變化情況時格外有用，所以層疊面積圖不適用於表示帶有負值的數據集。非常適用於對比多變量隨時間變化的情況。

預覽圖

設定值

• 資料源

[{
  country: 'Asia',
  year: '1750',
  value: 502
}, {
  country: 'Asia',
  year: '1800',
  value: 635
}, {
  country: 'Asia',
  year: '1850',
  value: 809
}, {
  country: 'Asia',
  year: '1900',
  value: 5268
}, {
  country: 'Asia',
  year: '1950',
  value: 4400
}, {
  country: 'Asia',
  year: '1999',
  value: 3634
}, {
  country: 'Asia',
  year: '2050',
  value: 947
}, {
  country: 'Africa',
  year: '1750',
  value: 106
}, {
  country: 'Africa',
  year: '1800',
  value: 107
}, {
  country: 'Africa',
  year: '1850',
  value: 111
}, {
  country: 'Africa',
  year: '1900',
  value: 1766
}, {
  country: 'Africa',
  year: '1950',
  value: 221
}, {
  country: 'Africa',
  year: '1999',
  value: 767
}, {
  country: 'Africa',
  year: '2050',
  value: 133
}, {
  country: 'Europe',
  year: '1750',
  value: 163
}, {
  country: 'Europe',
  year: '1800',
  value: 203
}, {
  country: 'Europe',
  year: '1850',
  value: 276
}, {
  country: 'Europe',
  year: '1900',
  value: 628
}, {
  country: 'Europe',
  year: '1950',
  value: 547
}, {
  country: 'Europe',
  year: '1999',
  value: 729
}, {
  country: 'Europe',
  year: '2050',
  value: 408
}, {
  country: 'Oceania',
  year: '1750',
  value: 200
}, {
  country: 'Oceania',
  year: '1800',
  value: 200
}, {
  country: 'Oceania',
  year: '1850',
  value: 200
}, {
  country: 'Oceania',
  year: '1900',
  value: 460
}, {
  country: 'Oceania',
  year: '1950',
  value: 230
}, {
  country: 'Oceania',
  year: '1999',
  value: 300
}, {
  country: 'Oceania',
  year: '2050',
  value: 300
}]

• 內距

40,40, 80, 60

• 比例尺 Scale

year 比例尺 （ X軸 ）

• 圖 Geom

區域圖（ area ）

線圖（ Line ）

• 圖示 Legend

區間面積圖

預覽圖

設定值

• 資料源

[{
  time: 1246406400000,
  constest: 21.5,
  temperature: [14.3, 27.7]
}, {
  time: 1246492800000,
  constest: 22.1,
  temperature: [14.5, 27.8]
}, {
  time: 1246579200000,
  constest: 23,
  temperature: [15.5, 29.6]
}, {
  time: 1246665600000,
  constest: 23.8,
  temperature: [16.7, 30.7]
}, {
  time: 1246752000000,
  constest: 21.4,
  temperature: [16.5, 25.0]
}, {
  time: 1246838400000,
  constest: 21.3,
  temperature: [17.8, 25.7]
}, {
  time: 1246924800000,
  constest: 18.3,
  temperature: [13.5, 24.8]
}, {
  time: 1247011200000,
  constest: 15.4,
  temperature: [10.5, 21.4]
}, {
  time: 1247097600000,
  constest: 16.4,
  temperature: [9.2, 23.8]
}, {
  time: 1247184000000,
  constest: 17.7,
  temperature: [11.6, 21.8]
}, {
  time: 1247270400000,
  constest: 17.5,
  temperature: [10.7, 23.7]
}, {
  time: 1247356800000,
  constest: 17.6,
  temperature: [11.0, 23.3]
}, {
  time: 1247443200000,
  constest: 17.7,
  temperature: [11.6, 23.7]
}, {
  time: 1247529600000,
  constest: 16.8,
  temperature: [11.8, 20.7]
}, {
  time: 1247616000000,
  constest: 17.7,
  temperature: [12.6, 22.4]
}, {
  time: 1247702400000,
  constest: 16.3,
  temperature: [13.6, 19.6]
}, {
  time: 1247788800000,
  constest: 17.8,
  temperature: [11.4, 22.6]
}, {
  time: 1247875200000,
  constest: 18.1,
  temperature: [13.2, 25.0]
}, {
  time: 1247961600000,
  constest: 17.2,
  temperature: [14.2, 21.6]
}, {
  time: 1248048000000,
  constest: 14.4,
  temperature: [13.1, 17.1]
}, {
  time: 1248134400000,
  constest: 13.7,
  temperature: [12.2, 15.5]
}, {
  time: 1248220800000,
  constest: 15.7,
  temperature: [12.0, 20.8]
}, {
  time: 1248307200000,
  constest: 14.6,
  temperature: [12.0, 17.1]
}, {
  time: 1248393600000,
  constest: 15.3,
  temperature: [12.7, 18.3]
}, {
  time: 1248480000000,
  constest: 15.3,
  temperature: [12.4, 19.4]
}, {
  time: 1248566400000,
  constest: 15.8,
  temperature: [12.6, 19.9]
}, {
  time: 1248652800000,
  constest: 15.2,
  temperature: [11.9, 20.2]
}, {
  time: 1248739200000,
  constest: 14.8,
  temperature: [11.0, 19.3]
}, {
  time: 1248825600000,
  constest: 14.4,
  temperature: [10.8, 17.8]
}, {
  time: 1248912000000,
  constest: 15,
  temperature: [11.8, 18.5]
}, {
  time: 1248998400000,
  constest: 13.6,
  temperature: [10.8, 16.1]
}]

• 內距

40,40, 60, 60

• 比例尺 Scale

time（X軸）

constest（Y軸 ）

temperature（ Y軸 ）

• 軸座標 Axis

constest（ Y軸 ）

• 圖 Geom

區域圖（ area ）

線圖（ Line ）

點圖（ point ）

片段面積圖

預覽圖

設定值

• 資料源

[{
  time: 1246406400000,
  constest: 21.5,
  temperature: [14.3, 27.7]
}, {
  time: 1246492800000,
  constest: 22.1,
  temperature: [14.5, 27.8]
}, {
  time: 1246579200000,
  constest: 23,
  temperature: [15.5, 29.6]
}, {
  time: 1246665600000,
  constest: 23.8,
  temperature: [16.7, 30.7]
}, {
  time: 1246752000000,
  constest: 21.4,
  temperature: [16.5, 25.0]
}, {
  time: 1246838400000,
  constest: 21.3,
  temperature: [17.8, 25.7]
}, {
  time: 1246924800000,
  constest: 18.3,
  temperature: [13.5, 24.8]
}, {
  time: 1247011200000,
  constest: 15.4,
  temperature: [10.5, 21.4]
}, {
  time: 1247097600000,
  constest: 16.4,
  temperature: [9.2, 23.8]
}, {
  time: 1247184000000,
  constest: 17.7,
  temperature: [11.6, 21.8]
}, {
  time: 1247270400000,
  constest: 17.5,
  temperature: [10.7, 23.7]
}, {
  time: 1247356800000,
  constest: 17.6,
  temperature: [11.0, 23.3]
}, {
  time: 1247443200000,
  constest: 17.7,
  temperature: [11.6, 23.7]
}, {
  time: 1247529600000,
  constest: 16.8,
  temperature: [11.8, 20.7]
}, {
  time: 1247616000000,
  constest: 17.7,
  temperature: [12.6, 22.4]
}, {
  time: 1247702400000,
  constest: 16.3,
  temperature: [13.6, 19.6]
}, {
  time: 1247788800000,
  constest: 17.8,
  temperature: [11.4, 22.6]
}, {
  time: 1247875200000,
  constest: 18.1,
  temperature: [13.2, 25.0]
}, {
  time: 1247961600000,
  constest: 17.2,
  temperature: [14.2, 21.6]
}, {
  time: 1248048000000,
  constest: 14.4,
  temperature: [13.1, 17.1]
}, {
  time: 1248134400000,
  constest: 13.7,
  temperature: [12.2, 15.5]
}, {
  time: 1248220800000,
  constest: 15.7,
  temperature: [12.0, 20.8]
}, {
  time: 1248307200000,
  constest: 14.6,
  temperature: [12.0, 17.1]
}, {
  time: 1248393600000,
  constest: 15.3,
  temperature: [12.7, 18.3]
}, {
  time: 1248480000000,
  constest: 15.3,
  temperature: [12.4, 19.4]
}, {
  time: 1248566400000,
  constest: 15.8,
  temperature: [12.6, 19.9]
}, {
  time: 1248652800000,
  constest: 15.2,
  temperature: [11.9, 20.2]
}, {
  time: 1248739200000,
  constest: 14.8,
  temperature: [11.0, 19.3]
}, {
  time: 1248825600000,
  constest: 14.4,
  temperature: [10.8, 17.8]
}, {
  time: 1248912000000,
  constest: 15,
  temperature: [11.8, 18.5]
}, {
  time: 1248998400000,
  constest: 13.6,
  temperature: [10.8, 16.1]
}]

• 內距

40, 40, 80, 60

• 前置處理函數 Transform

字串展開（ fold ）

• 比例尺 Scale

year（ X軸 ）

• 圖 Geom

區域圖（ area ）

線圖（ Line ）

• 圖示 Legend

正負面積圖

預覽圖

設定值

• 資料源

[{
  year: '1996',
  north: 322,
  south: 162
}, {
  year: '1997',
  north: 324,
  south: 90
}, {
  year: '1998',
  north: 329,
  south: 50
}, {
  year: '1999',
  north: 342,
  south: 77
}, {
  year: '2000',
  north: 348,
  south: 35
}, {
  year: '2001',
  north: 334,
  south: -45
}, {
  year: '2002',
  north: 325,
  south: -88
}, {
  year: '2003',
  north: 316,
  south: -120
}, {
  year: '2004',
  north: 318,
  south: -156
}, {
  year: '2005',
  north: 330,
  south: -123
}, {
  year: '2006',
  north: 355,
  south: -88
}, {
  year: '2007',
  north: 366,
  south: -66
}, {
  year: '2008',
  north: 337,
  south: -45
}, {
  year: '2009',
  north: 352,
  south: -29
}, {
  year: '2010',
  north: 377,
  south: -45
}, {
  year: '2011',
  north: 383,
  south: -88
}, {
  year: '2012',
  north: 344,
  south: -132
}, {
  year: '2013',
  north: 366,
  south: -146
}, {
  year: '2014',
  north: 389,
  south: -169
}, {
  year: '2015',
  north: 334,
  south: -184
}]

• 內距

40, 20, 80, 60

• 前置處理函數 Transform

字串展開（ fold ）

• 圖 Geom

區域圖（ area ）

線圖（ Line ）

• 圖示 Legend

箱型圖

基礎箱型圖

如果一個數據集中包含了一個分類變量和一個或者多個連續變量，那麼你可能會想知道連續變量會如何隨著分類變量水平的變化而變化，而箱形圖就可以提供這種方法，它只用了5個數字對分佈進行概括，即一組數據的最大值、最小值、中位數、下四分位數及上四分位數。對於數據集中的異常值，通常會以單獨的點的形式繪製。箱形圖可以水平或者垂直繪製。箱形圖多用於數值統計，雖然相比於直方圖和密度曲線較原始簡單，但是它不需要佔據過多的畫布空間，空間利用率高，非常適用於比較多組數據的分佈情況。

預覽圖

設定值

• 資料源

[{
  x: 'Oceania',
  low: 1,
  q1: 9,
  median: 16,
  q3: 22,
  high: 24
}, {
  x: 'East Europe',
  low: 1,
  q1: 5,
  median: 8,
  q3: 12,
  high: 16
}, {
  x: 'Australia',
  low: 1,
  q1: 8,
  median: 12,
  q3: 19,
  high: 26
}, {
  x: 'South America',
  low: 2,
  q1: 8,
  median: 12,
  q3: 21,
  high: 28
}, {
  x: 'North Africa',
  low: 1,
  q1: 8,
  median: 14,
  q3: 18,
  high: 24
}, {
  x: 'North America',
  low: 3,
  q1: 10,
  median: 17,
  q3: 28,
  high: 30
}, {
  x: 'West Europe',
  low: 1,
  q1: 7,
  median: 10,
  q3: 17,
  high: 22
}, {
  x: 'West Africa',
  low: 1,
  q1: 6,
  median: 8,
  q3: 13,
  high: 16
}]

• 內距

40,40,80,60

• 前置處理函數 Transform

數據加工（ map ）

function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}

• 圖 Geom

K線圖（ schema ）

一維箱型圖

預覽圖

設定值

• 資料源

[{
  low: 1,
  q1: 9,
  median: 16,
  q3: 22,
  high: 24
}]

• 內距

40, 40, 60

• 前置處理函數 Transform

數據加工（ map ）

function callback(obj) {
 obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
 return obj;
}

• 圖 Geom

K線圖（ schema ）

環狀箱型圖

預覽圖

設定值

• 資料源

[{
  x: 'Oceania',
  low: 1,
  q1: 9,
  median: 16,
  q3: 22,
  high: 24
}, {
  x: 'East Europe',
  low: 1,
  q1: 5,
  median: 8,
  q3: 12,
  high: 16
}, {
  x: 'Australia',
  low: 1,
  q1: 8,
  median: 12,
  q3: 19,
  high: 26
}, {
  x: 'South America',
  low: 2,
  q1: 8,
  median: 12,
  q3: 21,
  high: 28
}, {
  x: 'North Africa',
  low: 1,
  q1: 8,
  median: 14,
  q3: 18,
  high: 24
}, {
  x: 'North America',
  low: 3,
  q1: 10,
  median: 17,
  q3: 28,
  high: 30
}, {
  x: 'West Europe',
  low: 1,
  q1: 7,
  median: 10,
  q3: 17,
  high: 22
}, {
  x: 'West Africa',
  low: 1,
  q1: 6,
  median: 8,
  q3: 13,
  high: 16
}]

• 內距

50, 50, 100

• 前置處理函數 Transform

數據加工（map）

function callback(obj) {
 obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
 return obj;}

• 比例尺 Scale

range（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

• 圖示 Legend

• 極坐標 Coord

基礎箱型圖 (有異常值)

預覽圖

設定值

• 資料源

[{
  x: '職業 A',
  low: 20000,
  q1: 26000,
  median: 27000,
  q3: 32000,
  high: 38000,
  outliers: [50000, 52000]
}, {
  x: '職業 B',
  low: 40000,
  q1: 49000,
  median: 62000,
  q3: 73000,
  high: 88000,
  outliers: [32000, 29000, 106000]
}, {
  x: '職業 C',
  low: 52000,
  q1: 59000,
  median: 65000,
  q3: 74000,
  high: 83000,
  outliers: [91000]
}, {
  x: '職業 D',
  low: 58000,
  q1: 96000,
  median: 130000,
  q3: 170000,
  high: 200000,
  outliers: [42000, 210000, 215000]
}, {
  x: '職業 E',
  low: 24000,
  q1: 28000,
  median: 32000,
  q3: 38000,
  high: 42000,
  outliers: [48000]
}, {
  x: '職業 F',
  low: 47000,
  q1: 56000,
  median: 69000,
  q3: 85000,
  high: 100000,
  outliers: [110000, 115000, 32000]
}, {
  x: '職業 G',
  low: 64000,
  q1: 74000,
  median: 83000,
  q3: 93000,
  high: 100000,
  outliers: [110000]
}, {
  x: '職業 H',
  low: 67000,
  q1: 72000,
  median: 84000,
  q3: 95000,
  high: 110000,
  outliers: [57000, 54000]
}]

• 內距

40, 40, 60, 60

• 前置處理函數 Transform

數據加工（ map ）

function callback(obj) {
 obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
 return obj;}

• 比例尺 Scale

range（ Y軸 ）

outliers（ Y軸 ）

• 軸座標 Axis

outliers（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

點圖（ point ）

蠟燭圖

股票圖

燭形圖主要用於金融領域裡展示股票，期貨等交易數據，按照時間維度分為日 K 線、週 K 線、月 K 線。展示的數據需要滿足 K 線構成的四要素：即開盤價、收盤價、最高價、最低價。

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/candle-sticks.json
（ 資料來源：AntV ）
格式:
[{
time: "2015-11-19",
start: 8.18,
max: 8.33,
min: 7.98,
end: 8.32,
volumn: 1810,
money: 14723.56,
},{
time: "2015-11-18",
start: 8.37,
max: 8.6,
min: 8.03,
end: 8.09,
volumn: 2790.37,
money: 23309.19,
},
......
]

• 內距

40,30,80,40

• 前置處理函數 Transform

數據加工（ map ）

function callback(obj) {
 obj.trend = obj.start <= obj.end ? 'up' : 'down';
 obj.range = [obj.start, obj.end, obj.max, obj.min];
 return obj;}

• 比例尺 Scale

time（X軸）

volumn（ Y軸 ）

range（ Y軸 ）

• 軸座標 Axis

time（ X軸 ）

volumn（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}

柱狀圖（ interval ）

function(val) {
 return (val == 'up')? '#f04864':'#2fc25b';
}

• 圖示 Legend

股票範圍面積圖

預覽圖

設定值

• 資料源 - AntV

https://g2.antv.vision/zh/examples/data/stock-03.json
（ 資料來源：AntV ）

格式：
[{
date: 1186444800000,
range: [22.258032033902,25.4889359321959,],
start: 22.75,
end: 23.44,
lowest: 22.69,
highest: 23.7,
mean: 23.335,
trend: "up",
},{
date: 1186358400000,
range: [22.2381666799343,25.3786666401314,],
start: 23.03,
end: 22.97,
lowest: 22.44,
highest: 23.15,
mean: 23.285,
trend: "down",
},
......
]

• 內距

40, 40, 80, 60

• 前置處理函數 Transform

數據加工（ map ）

function callback(obj) {
 obj.stockRange = [obj.start, obj.end, obj.highest, obj.lowest];
 return obj;
}

• 比例尺 Scale

date（X軸）

range（ Y軸 ）

mean（ Y軸 ）

stockRange（ Y軸 ）

• 軸座標 Axis

mean（ Y軸 ）

stockRange（ Y軸 ）

• 圖 Geom

K線圖（ schema ）

function(obj){
 return (obj == 'up')? '#f04864' : '#2fc25b';
}

區域圖（ area ）

線圖（ line ）

• 圖示 Legend

雷達圖

基礎雷達圖

預覽圖

設定值

• 資料源

[{
  item: 'Design',
  a: 70,
  b: 30
}, {
  item: 'Development',
  a: 60,
  b: 70
}, {
  item: 'Marketing',
  a: 50,
  b: 60
}, {
  item: 'Users',
  a: 40,
  b: 50
}, {
  item: 'Test',
  a: 60,
  b: 70
}, {
  item: 'Language',
  a: 70,
  b: 50
}, {
  item: 'Technology',
  a: 50,
  b: 40
}, {
  item: 'Support',
  a: 30,
  b: 40
}, {
  item: 'Sales',
  a: 60,
  b: 40
}, {
  item: 'UX',
  a: 50,
  b: 60
}]

• 內距

50, 50, 80

• 前置處理函數 Transform

字串展開（ fold ）

• 比例尺 Scale

score（ Y軸 ）

• 軸座標 Axis

item（ X軸 ）

• 圖 Geom

線圖（line）

點圖（point）

區域圖（ area ）

• 圖示 Legend

• 極坐標 Coord

曲線雷達圖

預覽圖

設定值

• 資料源

[{"x": 0,"y": 0},{"x": 1,"y": 0.0785},{"x": 2,"y": 0.1568},{"x": 3,"y": 0.2347},{"x": 4,"y": 0.3119},{"x": 5,"y": 0.3882},{"x": 6,"y": 0.4635},{"x": 7,"y": 0.5376},{"x": 8,"y": 0.6101},{"x": 9,"y": 0.681},{"x": 10,"y": 0.75},{"x": 11,"y": 0.817},{"x": 12,"y": 0.8817},{"x": 13,"y": 0.944},{"x": 14,"y": 1.0037},{"x": 15,"y": 1.0607},{"x": 16,"y": 1.1147},{"x": 17,"y": 1.1657},{"x": 18,"y": 1.2135},{"x": 19,"y": 1.258},{"x": 20,"y": 1.299},{"x": 21,"y": 1.3365},{"x": 22,"y": 1.3703},{"x": 23,"y": 1.4004},{"x": 24,"y": 1.4266},{"x": 25,"y": 1.4489},{"x": 26,"y": 1.4672},{"x": 27,"y": 1.4815},{"x": 28,"y": 1.4918},{"x": 29,"y": 1.4979},{"x": 30,"y": 1.5},{"x": 31,"y": 1.4979},{"x": 32,"y": 1.4918},{"x": 33,"y": 1.4815},{"x": 34,"y": 1.4672},{"x": 35,"y": 1.4489},{"x": 36,"y": 1.4266},{"x": 37,"y": 1.4004},{"x": 38,"y": 1.3703},{"x": 39,"y": 1.3365},{"x": 40,"y": 1.299},{"x": 41,"y": 1.258},{"x": 42,"y": 1.2135},{"x": 43,"y": 1.1657},{"x": 44,"y": 1.1147},{"x": 45,"y": 1.0607},{"x": 46,"y": 1.0037},{"x": 47,"y": 0.944},{"x": 48,"y": 0.8817},{"x": 49,"y": 0.817},{"x": 50,"y": 0.75},{"x": 51,"y": 0.681},{"x": 52,"y": 0.6101},{"x": 53,"y": 0.5376},{"x": 54,"y": 0.4635},{"x": 55,"y": 0.3882},{"x": 56,"y": 0.3119},{"x": 57,"y": 0.2347},{"x": 58,"y": 0.1568},{"x": 59,"y": 0.0785},{"x": 60,"y": 0},{"x": 61,"y": 0.0785},{"x": 62,"y": 0.1568},{"x": 63,"y": 0.2347},{"x": 64,"y": 0.3119},{"x": 65,"y": 0.3882},{"x": 66,"y": 0.4635},{"x": 67,"y": 0.5376},{"x": 68,"y": 0.6101},{"x": 69,"y": 0.681},{"x": 70,"y": 0.75},{"x": 71,"y": 0.817},{"x": 72,"y": 0.8817},{"x": 73,"y": 0.944},{"x": 74,"y": 1.0037},{"x": 75,"y": 1.0607},{"x": 76,"y": 1.1147},{"x": 77,"y": 1.1657},{"x": 78,"y": 1.2135},{"x": 79,"y": 1.258},{"x": 80,"y": 1.299},{"x": 81,"y": 1.3365},{"x": 82,"y": 1.3703},{"x": 83,"y": 1.4004},{"x": 84,"y": 1.4266},{"x": 85,"y": 1.4489},{"x": 86,"y": 1.4672},{"x": 87,"y": 1.4815},{"x": 88,"y": 1.4918},{"x": 89,"y": 1.4979},{"x": 90,"y": 1.5},{"x": 91,"y": 1.4979},{"x": 92,"y": 1.4918},{"x": 93,"y": 1.4815},{"x": 94,"y": 1.4672},{"x": 95,"y": 1.4489},{"x": 96,"y": 1.4266},{"x": 97,"y": 1.4004},{"x": 98,"y": 1.3703},{"x": 99,"y": 1.3365},{"x": 100,"y": 1.299},{"x": 101,"y": 1.258},{"x": 102,"y": 1.2135},{"x": 103,"y": 1.1657},{"x": 104,"y": 1.1147},{"x": 105,"y": 1.0607},{"x": 106,"y": 1.0037},{"x": 107,"y": 0.944},{"x": 108,"y": 0.8817},{"x": 109,"y": 0.817},{"x": 110,"y": 0.75},{"x": 111,"y": 0.681},{"x": 112,"y": 0.6101},{"x": 113,"y": 0.5376},{"x": 114,"y": 0.4635},{"x": 115,"y": 0.3882},{"x": 116,"y": 0.3119},{"x": 117,"y": 0.2347},{"x": 118,"y": 0.1568},{"x": 119,"y": 0.0785},{"x": 120,"y": 0},{"x": 121,"y": 0.0785},{"x": 122,"y": 0.1568},{"x": 123,"y": 0.2347},{"x": 124,"y": 0.3119},{"x": 125,"y": 0.3882},{"x": 126,"y": 0.4635},{"x": 127,"y": 0.5376},{"x": 128,"y": 0.6101},{"x": 129,"y": 0.681},{"x": 130,"y": 0.75},{"x": 131,"y": 0.817},{"x": 132,"y": 0.8817},{"x": 133,"y": 0.944},{"x": 134,"y": 1.0037},{"x": 135,"y": 1.0607},{"x": 136,"y": 1.1147},{"x": 137,"y": 1.1657},{"x": 138,"y": 1.2135},{"x": 139,"y": 1.258},{"x": 140,"y": 1.299},{"x": 141,"y": 1.3365},{"x": 142,"y": 1.3703},{"x": 143,"y": 1.4004},{"x": 144,"y": 1.4266},{"x": 145,"y": 1.4489},{"x": 146,"y": 1.4672},{"x": 147,"y": 1.4815},{"x": 148,"y": 1.4918},{"x": 149,"y": 1.4979},{"x": 150,"y": 1.5},{"x": 151,"y": 1.4979},{"x": 152,"y": 1.4918},{"x": 153,"y": 1.4815},{"x": 154,"y": 1.4672},{"x": 155,"y": 1.4489},{"x": 156,"y": 1.4266},{"x": 157,"y": 1.4004},{"x": 158,"y": 1.3703},{"x": 159,"y": 1.3365},{"x": 160,"y": 1.299},{"x": 161,"y": 1.258},{"x": 162,"y": 1.2135},{"x": 163,"y": 1.1657},{"x": 164,"y": 1.1147},{"x": 165,"y": 1.0607},{"x": 166,"y": 1.0037},{"x": 167,"y": 0.944},{"x": 168,"y": 0.8817},{"x": 169,"y": 0.817},{"x": 170,"y": 0.75},{"x": 171,"y": 0.681},{"x": 172,"y": 0.6101},{"x": 173,"y": 0.5376},{"x": 174,"y": 0.4635},{"x": 175,"y": 0.3882},{"x": 176,"y": 0.3119},{"x": 177,"y": 0.2347},{"x": 178,"y": 0.1568},{"x": 179,"y": 0.0785},{"x": 180,"y": 0},{"x": 181,"y": 0.0785},{"x": 182,"y": 0.1568},{"x": 183,"y": 0.2347},{"x": 184,"y": 0.3119},{"x": 185,"y": 0.3882},{"x": 186,"y": 0.4635},{"x": 187,"y": 0.5376},{"x": 188,"y": 0.6101},{"x": 189,"y": 0.681},{"x": 190,"y": 0.75},{"x": 191,"y": 0.817},{"x": 192,"y": 0.8817},{"x": 193,"y": 0.944},{"x": 194,"y": 1.0037},{"x": 195,"y": 1.0607},{"x": 196,"y": 1.1147},{"x": 197,"y": 1.1657},{"x": 198,"y": 1.2135},{"x": 199,"y": 1.258},{"x": 200,"y": 1.299},{"x": 201,"y": 1.3365},{"x": 202,"y": 1.3703},{"x": 203,"y": 1.4004},{"x": 204,"y": 1.4266},{"x": 205,"y": 1.4489},{"x": 206,"y": 1.4672},{"x": 207,"y": 1.4815},{"x": 208,"y": 1.4918},{"x": 209,"y": 1.4979},{"x": 210,"y": 1.5},{"x": 211,"y": 1.4979},{"x": 212,"y": 1.4918},{"x": 213,"y": 1.4815},{"x": 214,"y": 1.4672},{"x": 215,"y": 1.4489},{"x": 216,"y": 1.4266},{"x": 217,"y": 1.4004},{"x": 218,"y": 1.3703},{"x": 219,"y": 1.3365},{"x": 220,"y": 1.299},{"x": 221,"y": 1.258},{"x": 222,"y": 1.2135},{"x": 223,"y": 1.1657},{"x": 224,"y": 1.1147},{"x": 225,"y": 1.0607},{"x": 226,"y": 1.0037},{"x": 227,"y": 0.944},{"x": 228,"y": 0.8817},{"x": 229,"y": 0.817},{"x": 230,"y": 0.75},{"x": 231,"y": 0.681},{"x": 232,"y": 0.6101},{"x": 233,"y": 0.5376},{"x": 234,"y": 0.4635},{"x": 235,"y": 0.3882},{"x": 236,"y": 0.3119},{"x": 237,"y": 0.2347},{"x": 238,"y": 0.1568},{"x": 239,"y": 0.0785},{"x": 240,"y": 0},{"x": 241,"y": 0.0785},{"x": 242,"y": 0.1568},{"x": 243,"y": 0.2347},{"x": 244,"y": 0.3119},{"x": 245,"y": 0.3882},{"x": 246,"y": 0.4635},{"x": 247,"y": 0.5376},{"x": 248,"y": 0.6101},{"x": 249,"y": 0.681},{"x": 250,"y": 0.75},{"x": 251,"y": 0.817},{"x": 252,"y": 0.8817},{"x": 253,"y": 0.944},{"x": 254,"y": 1.0037},{"x": 255,"y": 1.0607},{"x": 256,"y": 1.1147},{"x": 257,"y": 1.1657},{"x": 258,"y": 1.2135},{"x": 259,"y": 1.258},{"x": 260,"y": 1.299},{"x": 261,"y": 1.3365},{"x": 262,"y": 1.3703},{"x": 263,"y": 1.4004},{"x": 264,"y": 1.4266},{"x": 265,"y": 1.4489},{"x": 266,"y": 1.4672},{"x": 267,"y": 1.4815},{"x": 268,"y": 1.4918},{"x": 269,"y": 1.4979},{"x": 270,"y": 1.5},{"x": 271,"y": 1.4979},{"x": 272,"y": 1.4918},{"x": 273,"y": 1.4815},{"x": 274,"y": 1.4672},{"x": 275,"y": 1.4489},{"x": 276,"y": 1.4266},{"x": 277,"y": 1.4004},{"x": 278,"y": 1.3703},{"x": 279,"y": 1.3365},{"x": 280,"y": 1.299},{"x": 281,"y": 1.258},{"x": 282,"y": 1.2135},{"x": 283,"y": 1.1657},{"x": 284,"y": 1.1147},{"x": 285,"y": 1.0607},{"x": 286,"y": 1.0037},{"x": 287,"y": 0.944},{"x": 288,"y": 0.8817},{"x": 289,"y": 0.817},{"x": 290,"y": 0.75},{"x": 291,"y": 0.681},{"x": 292,"y": 0.6101},{"x": 293,"y": 0.5376},{"x": 294,"y": 0.4635},{"x": 295,"y": 0.3882},{"x": 296,"y": 0.3119},{"x": 297,"y": 0.2347},{"x": 298,"y": 0.1568},{"x": 299,"y": 0.0785},{"x": 300,"y": 0},{"x": 301,"y": 0.0785},{"x": 302,"y": 0.1568},{"x": 303,"y": 0.2347},{"x": 304,"y": 0.3119},{"x": 305,"y": 0.3882},{"x": 306,"y": 0.4635},{"x": 307,"y": 0.5376},{"x": 308,"y": 0.6101},{"x": 309,"y": 0.681},{"x": 310,"y": 0.75},{"x": 311,"y": 0.817},{"x": 312,"y": 0.8817},{"x": 313,"y": 0.944},{"x": 314,"y": 1.0037},{"x": 315,"y": 1.0607},{"x": 316,"y": 1.1147},{"x": 317,"y": 1.1657},{"x": 318,"y": 1.2135},{"x": 319,"y": 1.258},{"x": 320,"y": 1.299},{"x": 321,"y": 1.3365},{"x": 322,"y": 1.3703},{"x": 323,"y": 1.4004},{"x": 324,"y": 1.4266},{"x": 325,"y": 1.4489},{"x": 326,"y": 1.4672},{"x": 327,"y": 1.4815},{"x": 328,"y": 1.4918},{"x": 329,"y": 1.4979},{"x": 330,"y": 1.5},{"x": 331,"y": 1.4979},{"x": 332,"y": 1.4918},{"x": 333,"y": 1.4815},{"x": 334,"y": 1.4672},{"x": 335,"y": 1.4489},{"x": 336,"y": 1.4266},{"x": 337,"y": 1.4004},{"x": 338,"y": 1.3703},{"x": 339,"y": 1.3365},{"x": 340,"y": 1.299},{"x": 341,"y": 1.258},{"x": 342,"y": 1.2135},{"x": 343,"y": 1.1657},{"x": 344,"y": 1.1147},{"x": 345,"y": 1.0607},{"x": 346,"y": 1.0037},{"x": 347,"y": 0.944},{"x": 348,"y": 0.8817},{"x": 349,"y": 0.817},{"x": 350,"y": 0.75},{"x": 351,"y": 0.681},{"x": 352,"y": 0.6101},{"x": 353,"y": 0.5376},{"x": 354,"y": 0.4635},{"x": 355,"y": 0.3882},{"x": 356,"y": 0.3119},{"x": 357,"y": 0.2347},{"x": 358,"y": 0.1568},{"x": 359,"y": 0.0785},{"x": 360,"y": 0}]

• 內距

40, 40, 60, 60

• 比例尺 Scale

x（ X軸 ）

• 軸座標 Axis

y（ y軸 ）

• 圖 Geom

線圖（line）

• 極坐標 Coord

其它

路徑圖

預覽圖

設定值

• 資料源

[{
  consumption: 0.65,
  price: 1,
  year: 1965
}, {
  consumption: 0.66,
  price: 1.05,
  year: 1966
}, {
  consumption: 0.64,
  price: 1.1,
  year: 1967
}, {
  consumption: 0.63,
  price: 1.12,
  year: 1968
}, {
  consumption: 0.55,
  price: 1.15,
  year: 1969
}, {
  consumption: 0.57,
  price: 1.19,
  year: 1970
}, {
  consumption: 0.58,
  price: 1.14,
  year: 1971
}, {
  consumption: 0.59,
  price: 1,
  year: 1972
}, {
  consumption: 0.57,
  price: 0.96,
  year: 1973
}, {
  consumption: 0.55,
  price: 0.92,
  year: 1974
}, {
  consumption: 0.54,
  price: 0.88,
  year: 1975
}, {
  consumption: 0.55,
  price: 0.87,
  year: 1976
}, {
  consumption: 0.42,
  price: 0.89,
  year: 1977
}, {
  consumption: 0.28,
  price: 1,
  year: 1978
}, {
  consumption: 0.15,
  price: 1.1,
  year: 1979
}]

• 內距

40, 40, 60, 60

• 圖 Geom

路徑圖（ path）

點圖（ point ）

更多應用範例

染色區域折線圖

預覽圖

設定值

• 資料源

[
{year: 1884,change: -0.28,},
{year: 1885,change: -0.32,},
{year: 1886,change: -0.31,},
{year: 1887,change: -0.33,},
{year: 1888,change: -0.2,},
{year: 1889,change: -0.12,},
{year: 1890,change: -0.37,},
{year: 1891,change: -0.24,},
{year: 1892,change: -0.27,},
{year: 1893,change: -0.3,},
{year: 1894,change: -0.31,},
{year: 1895,change: -0.21,},
{year: 1896,change: -0.15,},
{year: 1897,change: -0.11,},
{year: 1898,change: -0.28,},
{year: 1899,change: -0.16,},
{year: 1900,change: -0.09,},
{year: 1901,change: -0.15,},
{year: 1902,change: -0.27,},
{year: 1903,change: -0.35,},
{year: 1904,change: -0.44,},
{year: 1905,change: -0.28,},
{year: 1906,change: -0.23,},
{year: 1907,change: -0.4,},
{year: 1908,change: -0.43,},
{year: 1909,change: -0.47,},
{year: 1910,change: -0.42,},
{year: 1911,change: -0.44,},
{year: 1912,change: -0.35,},
{year: 1913,change: -0.34,},
{year: 1914,change: -0.16,},
{year: 1915,change: -0.11,},
{year: 1916,change: -0.34,},
{year: 1917,change: -0.4,},
{year: 1918,change: -0.26,},
{year: 1919,change: -0.22,},
{year: 1920,change: -0.27,},
{year: 1921,change: -0.21,},
{year: 1922,change: -0.28,},
{year: 1923,change: -0.24,},
{year: 1924,change: -0.28,},
{year: 1925,change: -0.21,},
{year: 1926,change: -0.1,},
{year: 1927,change: -0.21,},
{year: 1928,change: -0.21,},
{year: 1929,change: -0.36,},
{year: 1930,change: -0.15,},
{year: 1931,change: -0.09,},
{year: 1932,change: -0.17,},
{year: 1933,change: -0.28,},
{year: 1934,change: -0.14,},
{year: 1935,change: -0.2,},
{year: 1936,change: -0.15,},
{year: 1937,change: -0.03,},
{year: 1938,change: -0.03,},
{year: 1939,change: -0.03,},
{year: 1940,change: 0.08,},
{year: 1941,change: 0.12,},
{year: 1942,change: 0.09,},
{year: 1943,change: 0.13,},
{year: 1944,change: 0.25,},
{year: 1945,change: 0.12,},
{year: 1946,change: -0.04,},
{year: 1947,change: -0.05,},
{year: 1948,change: -0.09,},
{year: 1949,change: -0.09,},
{year: 1950,change: -0.18,},
{year: 1951,change: -0.07,},
{year: 1952,change: 0.01,},
{year: 1953,change: 0.08,},
{year: 1954,change: -0.13,},
{year: 1955,change: -0.15,},
{year: 1956,change: -0.2,},
{year: 1957,change: 0.04,},
{year: 1958,change: 0.07,},
{year: 1959,change: 0.03,},
{year: 1960,change: -0.02,},
{year: 1961,change: 0.05,},
{year: 1962,change: 0.03,},
{year: 1963,change: 0.06,},
{year: 1964,change: -0.2,},
{year: 1965,change: -0.1,},
{year: 1966,change: -0.05,},
{year: 1967,change: -0.02,},
{year: 1968,change: -0.07,},
{year: 1969,change: 0.07,},
{year: 1970,change: 0.02,},
{year: 1971,change: -0.09,},
{year: 1972,change: 0.01,},
{year: 1973,change: 0.15,},
{year: 1974,change: -0.07,},
{year: 1975,change: -0.02,},
{year: 1976,change: -0.11,},
{year: 1977,change: 0.18,},
{year: 1978,change: 0.07,},
{year: 1979,change: 0.17,},
{year: 1980,change: 0.27,},
{year: 1981,change: 0.33,},
{year: 1982,change: 0.13,},
{year: 1983,change: 0.3,},
{year: 1984,change: 0.15,},
{year: 1985,change: 0.12,},
{year: 1986,change: 0.19,},
{year: 1987,change: 0.33,},
{year: 1988,change: 0.41,},
{year: 1989,change: 0.28,},
{year: 1990,change: 0.44,},
{year: 1991,change: 0.43,},
{year: 1992,change: 0.23,},
{year: 1993,change: 0.24,},
{year: 1994,change: 0.32,},
{year: 1995,change: 0.46,},
{year: 1996,change: 0.35,},
{year: 1997,change: 0.48,},
{year: 1998,change: 0.64,},
{year: 1999,change: 0.42,},
{year: 2000,change: 0.42,},
{year: 2001,change: 0.55,},
{year: 2002,change: 0.63,},
{year: 2003,change: 0.62,},
{year: 2004,change: 0.55,},
{year: 2005,change: 0.69,},
{year: 2006,change: 0.63,},
{year: 2007,change: 0.66,},
{year: 2008,change: 0.54,},
{year: 2009,change: 0.64,},
{year: 2010,change: 0.71,},
{year: 2011,change: 0.6,},
{year: 2012,change: 0.63,},
{year: 2013,change: 0.65,},
{year: 2014,change: 0.74,},
{year: 2015,change: 0.87,},
{year: 2016,change: 0.99,},
]

• 內距

40, 40, 60, 60

• 圖 Geom

線圖（line）

區域圖（area）

• 分段著色 RegionFilter

分段著色- 漲 ( #FF4D4F )

分段著色- 跌 (#18a1cd)

折線柱狀圖

預覽圖

設定值

• 資料源

[
    { time: '10:10', call: 4, waiting: 2, people: 2 },
    { time: '10:15', call: 2, waiting: 6, people: 3 },
    { time: '10:20', call: 13, waiting: 2, people: 5 },
    { time: '10:25', call: 9, waiting: 9, people: 1 },
    { time: '10:30', call: 5, waiting: 2, people: 3 },
    { time: '10:35', call: 8, waiting: 2, people: 1 },
    { time: '10:40', call: 13, waiting: 1, people: 2 }
]

• 內距

40, 50, 50

• 比例尺 Scale

• 軸座標 Axis

time（X軸）

people（Y軸）

• 圖 Geom

柱狀圖（ interval ）

線圖（line）

點圖（point）