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

讓您更了解圖像編輯器的圖表工具使用方式

圖表區塊工具列說明

圖表區塊工具列說明

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

總圖預覽


圖表.png設定值


繪製圖表的資料源(可程式化)

邊與內容的距離

將設定值重新繪製上圖表區塊(更新圖表區塊)

圖表區塊工具列說明

圖例 Legend

預覽圖


圖例.png

圖例 Legend - 設定值

一般
文字樣式
標題
背景
圖表區塊工具列說明

極座標 Coord

預覽圖


極座標.png

極座標 Coord - 設定值


圖表區塊工具列說明

前置處理函數 Transform

預覽圖


前置處理函數.png

前置處理函數 Transform - 設定值


類型

  • 數據過濾
  • 數據加工
  • 字串過濾
  • 字串重新命名
  • 逆序排列
  • 數據排序
  • 按字串排序
  • 獲取子集
  • 數據分組
  • 補全行
  • 補全列、字串
  • 字串展開
圖表區塊工具列說明

比例尺 Scale

預覽圖


比例尺.png

比例尺 Scale - 設定值


類型 說明 舉例
linear 連續的數值

[1 ,2 ,3 ,4 ,5]

log 連續非線性的Log數據 將 [1,10,100,1000] 轉換成 [0,1,2,3]
power 連續非線性的pow數據 將 [2,4,8,16,32] 轉換成 [1,2,3,4,5]
cat 分類 [ '男' , '女' ]
time 連續的時間類型 股票時間
timeCat 非連續的時間 股票時間

timeCat_And_time.png

 範圍0 ~ 1 ,格式: 0,1 ,舉例:0.2~0.8
圖表區塊工具列說明

軸座標 Axis

預覽圖


軸座標.png

軸座標 Axis - 設定值


一般

  • 啟用此軸線

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

軸線

  • 顏色 (軸座標線的顏色)
  • 透明度 (軸座標線的透明度)
  • 虛線間距 (虛線的間距若不填為實線,例如 3 , 2 , 1 )
  • 寬度 (軸線的寬度)

標籤

  • 與軸線間距 (文字與軸座標的間距)

  • 格式化輸出函數 (將標籤的顯示的樣式程式化)

  • 自動旋轉

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

標題

  • 位置
  • 間距
  • 自動旋轉
  • 文字樣式
    • 對齊

    • 顏色

    • 大小

    • 粗體

    • 旋轉

    • 基準線

刻度線

  • 顏色 (刻度線的顏色)

  • 透明度 (刻度線的透明度)

  • 寬度 (刻度線的寬度)

  • 長度 (刻度線的長度)

次要刻度線(刻度與刻度中間的小刻度為次要刻度線,若值為空則不顯示)

  • 數量 (次刻度的數量)

  • 顏色 (次刻度的顏色)

  • 透明度 (次刻度的透明度)

  • 寬度 (次刻度的寬度)

  • 長度 (次刻度的長度)

網格

  • 類型
    • (線條樣式)

      • 顏色

      • 透明度

      • 虛線間距

      • 寬度

    • 矩形

      • 矩形顏色

         

  • 隱藏第一行

☑ 隱藏
☐ 不隱藏

☑ 隱藏
☐ 不隱藏

圖表區塊工具列說明

圖 Geom

預覽圖


圖.png

圖 Geom - 設定值


  • 欄位

    • 填入的數值來做繪圖

    • 一個值, 大多用來繪製圓餅圖

    • 兩個值, X軸與Y軸類型的圖表

    • 三個以上, 多邊形圖表

    • 例如:number*name

  • 類型

類型

說明

點圖

路徑圖

雙向繪出,左右來回皆可

線圖

單向繪出,從左至右繪出

區域圖

多邊形

K線圖

樹狀圖

熱力圖

  • 顏色(圖表內容的顏色)

    • 顏色欄位 (可填入變數,來做顏色區分)

    • 顏色參數

     

    填入色碼,若多個顏色變數皆可調整,若為空有預設值,例如:#333333,#000000,#ffffff
  • 形狀

    • 形狀欄位 (可填入變數,來做形狀區分)
    • 形狀參數

     

    填入下方樣式參數,若多個形狀變數皆可調整,若為空有預設值,例如:circle,square,diamond
  • 大小

    • 大小欄位 (可填入變數,來做大小區分)
    • 大小參數
      填入數字,若多個變數值皆可調整,若為空有預設值例如:2,3,5
  • 透明度

    • 透明度欄位(可填入變數,來做透明度區分)
    • 透明度參數

      填入0 ~ 1,若透明度欄位為空,不會有預設值,若多個變數值皆可調整,為空有預設值,例如:0.2,0.6,0.8

  • 調整欄位(圖表呈現類型)

堆疊

分組

擾動

對稱

折線圖

折線圖(Line Chart)用於顯示數據在一個連續的時間間隔或者時間跨度上的變化,它的特點是反映物體隨時間或有序類別而變化的趨勢

折線圖

基礎折線圖

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

預覽圖


基礎折線圖.png

設定值


[
{ 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
Year 比例尺( X軸 )
列表 設定值
欄位

year

類型 linear
刻度間距 1
優化數據範圍 開啟
 
Value 比例尺( Y軸 )
列表 設定值
欄位 value

類型

linear
刻度間距 1
最小值 0
最大值 13
優化數據範圍 開啟
線圖( Line )
列表 設定值

欄位

year*value
類型 線圖
點圖( point )
列表 設定值
欄位 year*value
類型 點圖
形狀 circle
大小 4
樣式 - 顏色 #ffffff
顏色 - 寬度 1
折線圖

多條折線圖

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

預覽圖


多條折線圖.png

設定值


[{
  "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
temperature 比例尺 ( X軸 )
列表 設定值
欄位

temperature

類型

linear
優化數據範圍 開啟
最小值 0
格式化函數 function(val) { return val + '°C'; }
點圖( point )
列表 設定值
欄位 month*temperature
類型 點圖
顏色欄位 city
形狀 circle
大小 4
樣式 - 顏色

#ffffff

樣式 - 寬度 1
線圖( Line )
列表 設定值
欄位 month*temperature
類型 線圖
顏色欄位

city

折線圖

曲形折線圖

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

預覽圖


曲形折線圖.png

設定值


[{
  "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
temperature 比例尺( X軸 )
列表 設定值
欄位

temperature

類型 linear
優化數據範圍 開啟
最小值 0
格式化函數 function (val) { return val + '°C'; }
 
線圖( Line )
列表 設定值

欄位

month*temperature
類型 線圖
顏色欄位 city
形狀 smooth
點圖( point )
列表 設定值
欄位

month*temperature

類型 點圖

顏色欄位

city

形狀 circle
大小 4
樣式 - 顏色 #ffffff
顏色 - 寬度 1
折線圖

階梯折線圖

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

預覽圖


階梯折線圖.png

設定值


[{
  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
month 比例尺 ( X軸 )
列表 設定值
欄位 month
類型 cat
優化數據範圍 開啟
value 比例尺 ( Y軸 )
列表 設定值
欄位 value
類型 linear
刻度間距 10
優化數據範圍 開啟
最小值 30
最大值 110
點圖( point )
列表 設定值
欄位 month*value
類型 點圖
形狀 circle
樣式 - 顏色 #ffffff
樣式 - 寬度 1
線圖( Line )
列表 設定值
欄位 month*value
類型 線圖
形狀 hv
折線圖

多條階梯折線圖

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

預覽圖


多條階梯折線圖.png

設定值


[{
  "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
線圖( Line )
列表 設定值
欄位 month*value
類型 線圖
顏色欄位 key
形狀 hv

柱狀圖

基礎柱狀圖,使用垂直的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類尺寸,另一個軸代表相應的數值。

柱狀圖

基礎柱狀圖

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

預覽圖


基礎柱狀圖.png

設定值


[{
  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
柱狀圖( interval )
列表 設定值
欄位 year*sales
類型 柱狀圖
柱狀圖

分組柱狀圖

預覽圖


分組柱狀圖.png

設定值


[{
  "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
柱狀圖( interval )
列表 設定值
欄位

月份*月均降雨量

類型 柱狀圖
顏色欄位 name
調整欄位 分組 | dodge
dodgeRatio 0.5
marginRatio 0.1
列表 設定值
啟用 開啟
欄位 name
位置
排版 水平
柱狀圖

堆疊柱狀圖

預覽圖


堆疊柱狀圖.png

設定值


[{
  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
字串展開(fold)
列表 設定值

類型

字串展開
要展開的欄位 Jan.,Feb.,Mar.,Apr.,May,Jun.,Jul.,Aug.
  name
key key
value value
柱狀圖( interval )
列表 設定值
欄位 key*value
類型 柱狀圖d
顏色欄位 name
調整欄位 堆疊 | stack
列表 設定值
啟用 開啟
欄位 key
位置
排版 水平
柱狀圖

區間柱狀圖

預覽圖


區間柱狀圖.png

設定值


[{
  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
柱狀圖( interval )
列表 設定值
欄位 x*y
類型 柱狀圖

 

柱狀圖

基礎條形圖

預覽圖


基礎條形圖.png

設定值


[{
  country: '巴西',
  population: 18203
}, {
  country: '印尼',
  population: 23489
}, {
  country: '美国',
  population: 29034
}, {
  country: '印度',
  population: 104970
}, {
  country: '中国',
  population: 131744
}]
40, 60, 60, 70
柱狀圖( interval )
列表 設定值
欄位

country*population

類型 柱狀圖
列表 設定值
類型 直角坐標系
轉置 true
柱狀圖

分組條形圖

預覽圖


分組條形圖.png

設定值


[{
  "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
value(Y軸
列表 設定值
欄位 value
啟用 開啟
位置 right
柱狀圖( interval )
列表 設定值
欄位

label*value

類型 柱狀圖
顏色欄位

type

調整欄位 分組 | dodge
dodgeRatio

0.35

marginRatio 0.5
列表 設定值
啟用 開啟
欄位 type
位置
排版 水平
列表 設定值
類型 直角坐標系
反轉 Y
轉置 true
柱狀圖

堆疊條形圖

預覽圖


堆疊條形圖.png

設定值


[{
  '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
字串展開(fold
列表 設定值
類型 字串展開
要展開的欄位 小於5歲,5至13歲,14至17歲
保留欄位 State
key 年齡段
value 人口數量
柱狀圖( interval )
列表 設定值
欄位

State*人口數量

類型 柱狀圖
顏色欄位

年齡段

調整欄位 堆疊 | stack
列表 設定值
啟用 開啟
欄位 年齡段
位置
排版 水平
列表 設定值
類型 直角坐標系
轉置 true
柱狀圖

區間條形圖

預覽圖


區間條形圖.png

設定值


[{
  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
數據加工(map)
列表 設定值
類型 數據加工
加工函數
function callback(row) {
row.range = [row.minimum, row.highest];
return row;
}
柱狀圖( interval )
列表 設定值
欄位

profession*range

類型 柱狀圖
列表 設定值
類型 直角坐標系
轉置 true

圓餅圖

餅圖通過將一個圓餅按照分類的佔比劃分成多個區塊,整個圓餅代表 數據的總計,每個區塊鏈(圓弧)表示該分類占總體的比例大小,所有區塊鏈(圓弧)的加和等於100%。可以很好地幫助用戶快速了解數據的佔比分配。

圓餅圖

基礎圓餅圖

預覽圖


基礎圓餅圖.png

設定值


[{
  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
柱狀圖( interval )
列表 設定值
欄位

count

類型 柱狀圖
顏色欄位

item

調整欄位 堆疊 | stack
樣式 - 顏色 #ffffff
樣式 - 寬度 2
列表 設定值
啟用 開啟
欄位 count
位置
排版 水平
垂直偏移量 -40
列表 設定值
類型 圓餅圖
圓餅圖

基礎圓環圖

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

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

預覽圖


基礎圓環圖.png

設定值


[{
  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
柱狀圖( interval )
列表 設定值
欄位

count

類型 柱狀圖
顏色欄位

item

調整欄位 堆疊 | stack
樣式 - 顏色 #ffffff
樣式 - 寬度 2
列表 設定值
啟用 開啟
欄位 count
位置
排版 水平
垂直偏移量 -40
列表 設定值
類型 圓餅圖
空心圓半徑 0.5
半徑 0.9
圓餅圖

單色南丁格爾玫瑰圖

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

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

預覽圖


單色南丁格爾玫瑰圖.png

設定值


[{
  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

 

population( Y軸 )
列表 設定值
欄位 population
啟用 關閉
柱狀圖( interval )
列表 設定值
欄位

year*population

類型 柱狀圖
樣式 - 顏色 #ffffff
樣式 - 寬度 2
列表 設定值
類型 極坐標系
圓餅圖

多色南丁格爾玫瑰圖

預覽圖


多色南丁格爾玫瑰圖.png

設定值


[{
  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

 

population( Y軸 )
列表 設定值
欄位 population
啟用 關閉
year( X軸 )
列表 設定值
欄位 year
啟用 關閉
柱狀圖( interval )
列表 設定值
欄位

year*population

類型 柱狀圖
顏色欄位 year
樣式 - 顏色 #ffffff
樣式 - 寬度 2
列表 設定值
啟用 開啟
欄位 year
位置
排版 垂直
水平偏移量 -160
垂直偏移量 -160
列表 設定值
類型 極坐標系
圓餅圖

南丁格爾玫瑰圓環圖

預覽圖


南丁格爾玫瑰圓環圖.png

設定值


[{
  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

 

population( Y軸 )
列表 設定值
欄位 population
啟用 關閉
year( X軸 )
列表 設定值
欄位 year
啟用 關閉
柱狀圖( interval )
列表 設定值
欄位

year*population

類型 柱狀圖
顏色欄位 year
樣式 - 顏色 #ffffff
樣式 - 寬度 2
列表 設定值
啟用 開啟
欄位 year
位置
排版 垂直
水平偏移量 -160
垂直偏移量 -160
列表 設定值
類型 極坐標系

空心圓半徑

0.25
半徑 1

點圖

Scatter Chart,也叫 X-Y 圖,它將所有的數據以點的形式展現在笛卡爾坐標系上,以顯示變量之間的相互影響程度,點的位置由變量的數值決定。

點圖

基礎散點圖

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

預覽圖


散點圖.png

設定值


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
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
形狀 circle
點圖

多色散點圖

預覽圖


多色散點圖.png

設定值


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
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
顏色欄位 gender
形狀參數 circle
大小參數 4
點圖

多形多色散點圖

預覽圖


多形多色散點圖.PNG

設定值


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
點圖(point)
列表 設定值
欄位 height*weight
類型 點圖
顏色欄位 gender
形狀 gender
形狀參數 circle,diamond
大小參數 4
點圖

擾動點圖

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

預覽圖


擾動點圖.png

設定值


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
Class(X軸)
列表 設定值
欄位 Class
類型 cat
刻度數量 5
優化數據範圍 開啟
Score( X軸 )
列表 設定值
欄位 Score
啟用 開啟
位置 left
Class( Y軸 )
列表 設定值
欄位 Class
啟用 開啟
刻度現 - 顏色 #A14242
次要刻度 - 數量 2
次要刻度 - 顏色 #A14242
點圖(point)
列表 設定值
欄位

Class*Score

類型 點圖
顏色欄位 Grade
形狀 circle
大小參數 4
調整欄位 擾動 | Jitter
列表 設定值
啟用 開啟
欄位 Class
位置
排版 水平
點圖

氣泡圖

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

預覽圖


氣泡圖.png

設定值


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
GDP(X軸)
列表 設定值
欄位 GDP
類型

linear

優化數據範圍 開啟
最小值 0
格式化函數
function formatter(value) {
return (value / 1000).toFixed(0) + 'k';
}
點圖(point)
列表 設定值
欄位

GDP*LifeExpectancy

類型 點圖
顏色欄位 continent
形狀 circle
大小欄位

Population

大小參數 4,65
調整欄位 擾動 | Jitter
列表 設定值
啟用 開啟
欄位 Population
位置
排版 水平
水平偏移量

140

水平間距

80

面積圖

面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充,這樣一個填充區域我們叫做面積,顏色的填充可以更好的突出趨勢信息。

面積圖

基礎面積圖

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

預覽圖


基礎面積圖.png

設定值


[{
  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
year 比例尺 ( X軸 )
列表 設定值
欄位

year

類型

linear
刻度間距 1
優化數據範圍 開啟
value 比例尺 ( Y軸 )
列表 設定值
欄位 value
類型 linear
優化數據範圍 開啟
最小值 10000
最大值 35000
格式化函數
function formatter(val) {
return (val / 10000).toFixed(1) + 'k';
}
區域圖( area )
列表 設定值
欄位 year*value
類型 區域圖
線圖( Line )
列表 設定值
欄位

year*value

類型 線圖
面積圖

堆疊面積圖

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

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

預覽圖


堆疊面積圖.png

設定值


[{
  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

year 比例尺 ( X軸 )

列表 設定值
欄位

year

類型

linear
刻度間距 50
優化數據範圍 開啟
區域圖( area )
列表 設定值
欄位 year*value
類型 區域圖
顏色欄位 country
調整欄位 堆疊 | stack
線圖( Line )
列表 設定值
欄位

year*value

類型 線圖

顏色欄位

country
大小 2
調整欄位
堆疊 | stack
列表 設定值
啟用 開啟
欄位 country
位置
排版 水平
面積圖

區間面積圖

預覽圖


區間面積圖.png

設定值


[{
  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
time(X軸
列表 設定值
欄位

time

類型

time
優化數據範圍 開啟
時間格式 MM-DD

constest(Y軸 )
列表 設定值
欄位 constest
類型 linear
優化數據範圍 開啟
最小值 5
最大值 35
temperature( Y軸 )
列表 設定值
欄位 temperature
類型 linear
優化數據範圍 開啟
最小值 5
最大值 35
constest( Y軸 )
列表 設定值
欄位 constest
啟用 關閉
區域圖( area )
列表 設定值
欄位 time*temperature
類型 區域圖
線圖( Line )
列表 設定值
欄位

time*constest

類型 線圖
大小 2
點圖( point )
列表 設定值
欄位 time*constest
類型 點圖
形狀 circle
樣式 - 顏色 #ffffff
樣式 - 寬度 1
面積圖

片段面積圖

預覽圖


片段面積圖.png

設定值


[{
  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
字串展開( fold )
列表 設定值
類型 字串展開
要展開的欄位 ACME,Compitor
保留欄位

year

key type
Value value
year( X軸 )
列表 設定值
欄位 year
類型 linear
刻度間距 1
優化數據範圍 開啟
區域圖( area )
列表 設定值
欄位 year*value
類型 區域圖

顏色欄位

type
形狀 smooth
線圖( Line )
列表 設定值
欄位

year*value

類型 線圖
顏色欄位 type
形狀 smooth
大小 2
列表 設定值
啟用 開啟
欄位 type
位置
排版 水平
面積圖

正負面積圖

預覽圖


正負面積圖.png

設定值


[{
  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
字串展開( fold )
列表 設定值
類型 字串展開
要展開的欄位 north,south
保留欄位

year

key type
Value value
區域圖( area )
列表 設定值
欄位 year*value
類型 區域圖

顏色欄位

type
線圖( Line )
列表 設定值
欄位

year*value

類型 線圖
顏色欄位 type
大小 2
列表 設定值
啟用 開啟
欄位 value
位置
排版 水平

箱型圖

箱型圖,又稱盒須圖、盒式圖或箱線圖,是一種用作顯示一組數據分佈情況的統計圖。

箱型圖

基礎箱型圖

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

預覽圖


基礎箱型圖.png

設定值


[{
  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
數據加工( map )
列表 設定值

類型

數據加工
加工函數
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
K線圖( schema )
列表 設定值
欄位 x*range
類型

K線圖

形狀 box
樣式 - 顏色

#545454

箱型圖

一維箱型圖

預覽圖


一維箱型圖.png

設定值


[{
  low: 1,
  q1: 9,
  median: 16,
  q3: 22,
  high: 24
}]
40, 40, 60
數據加工( map )
列表 設定值

類型

數據加工
加工函數
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;
}
K線圖( schema )
列表 設定值
欄位 range*1
類型

K線圖

形狀 box
樣式 - 顏色

#545454

箱型圖

環狀箱型圖

預覽圖


極座標箱型圖.png

設定值


[{
  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
數據加工(map
列表 設定值
類型 數據加工
加工函數
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
range( Y軸 )
列表 設定值
欄位 range
類型 linear
優化數據範圍 開啟
最大值 35
K線圖( schema )
列表 設定值
欄位

x*range

類型 K線圖
顏色欄位

x

形狀 box
大小 60
列表 設定值
啟用 開啟
欄位 x
位置
排版 水平
自動換行 開啟
列表 設定值
類型 極座標系
空心圓半徑 0.4
箱型圖

基礎箱型圖 (有異常值)

預覽圖


異常值箱型圖.png

設定值


[{
  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
數據加工( map )
列表 設定值
類型 數據加工
加工函數
function callback(obj) {
obj.range = [obj.low, obj.q1, obj.median, obj.q3, obj.high];
return obj;}
range( Y軸 )
列表 設定值
欄位 range
類型 linear
優化數據範圍 開啟
最小值 0
最大值 250000
outliers( Y軸 )
列表 設定值
欄位 outliers
類型 linear
優化數據範圍 開啟
最小值 0
最大值 250000
outliers( Y軸 )
列表 設定值
啟用 關閉
類型 outliers
K線圖( schema )
列表 設定值
欄位

x*range

類型 K線圖
形狀 box
點圖( point )
列表 設定值
欄位 x*outliers
類型 點圖
形狀 circle
大小 3

蠟燭圖

燭形圖,原名 K 線圖,蠟燭圖,又稱陰陽圖、棒線、紅黑線或蠟燭線,常用於展示股票交易數據。

蠟燭圖

股票圖

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

預覽圖


範例股票圖.png

設定值


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
數據加工( map )
列表 設定值
加工函數
function callback(obj) {
obj.trend = obj.start <= obj.end ? 'up' : 'down';
obj.range = [obj.start, obj.end, obj.max, obj.min];
return obj;}
time(X軸)
列表 設定值
欄位 time
類型 timeCat
刻度數量 10
優化數據範圍 開啟
時間格式 MM-DD
volumn( Y軸 )
列表 設定值
欄位 volumn
類型 linear
優化數據範圍 開啟
最小值 0
最大值 30000
range( Y軸 )
列表 設定值
欄位 range
類型 linear
刻度間距 2
優化數據範圍 開啟
最小值 0
最大值 18
time( X軸 )
列表 設定值
欄位 time
啟用 開啟
volumn( Y軸 )
列表 設定值
欄位 volumn
啟用 關閉
K線圖( schema )
列表 設定值
欄位

time*range

類型 K線圖
顏色欄位 trend
顏色
function(val) {
return (val == 'up')? '#f04864':'#2fc25b';
}
形狀 candle
柱狀圖( interval )
列表 設定值
欄位 time*volumn
類型 柱狀圖
顏色欄位 trend
顏色
function(val) {
return (val == 'up')? '#f04864':'#2fc25b';
}
列表 設定值
啟用 開啟
欄位 range
位置
排版 水平
水平偏移量 15
蠟燭圖

股票範圍面積圖

預覽圖


股票範圍面積圖.png

設定值


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
數據加工( map )
列表 設定值
類型 數據加工
加工函數
function callback(obj) {
 obj.stockRange = [obj.start, obj.end, obj.highest, obj.lowest];
 return obj;
}
date(X軸)
列表 設定值
欄位 date
類型 time
刻度數量 10
優化數據範圍 開啟
時間格式 MM-DD
range( Y軸 )
列表 設定值
欄位 range
類型 linear
刻度間距 2
優化數據範圍 開啟
最小值 20
最大值 35
mean( Y軸 )
列表 設定值
欄位 mean
類型 linear
優化數據範圍 開啟
最小值 20
最大值 35
stockRange( Y軸 )
列表 設定值
欄位 stockRange
類型 linear
優化數據範圍 開啟
最小值 20
最大值 35
mean( Y軸 )
列表 設定值
欄位 mean
啟用 關閉
stockRange( Y軸 )
列表 設定值
欄位 stockRange
啟用 關閉
K線圖( schema )
列表 設定值
欄位

date*stockRange

類型 K線圖
顏色
function(obj){
 return (obj == 'up')? '#f04864' : '#2fc25b';
}
形狀 candle
區域圖( area )
列表 設定值
欄位 date*range
類型 區域圖
顏色 #64b5f6
線圖( line )
列表 設定值
欄位 date*mean
類型 線圖
顏色 #FACC14
列表 設定值
啟用 開啟
欄位 trend
位置
排版 水平

雷達圖

雷達圖是以相同點開始的軸上表示的三個或更多個定量變量的二維圖形的形式顯示多變量數據的圖形方法。軸的相對位置和角度通常是不知情的。

雷達圖

基礎雷達圖

預覽圖


基礎雷達圖.png

設定值


[{
  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
字串展開( fold )
列表 設定值
類型 字串展開
要展開的欄位 a,b
保留欄位 item
Key user
Value score
score( Y軸 )
列表 設定值
欄位 score
類型 linear
最小值 0
最大值 80
item( X軸 )
列表 設定值
欄位 item
啟用 開啟
軸線 - 顏色 transparent
線圖(line)
列表 設定值
欄位

item*score

類型 線圖
顏色欄位 user
大小 2
點圖(point)
列表 設定值
欄位 item*score
類型 點圖
顏色欄位 user
形狀 circle
大小 4
樣式 - 顏色 #ffffff
樣式 - 寬度 1
區域圖( area )
列表 設定值
欄位 item*score
類型 區域圖
顏色欄位 user
列表 設定值
啟用 開啟
欄位 user
位置
排版 水平
列表 設定值
類型 極坐標系
雷達圖

曲線雷達圖

預覽圖


曲線雷達圖.png

設定值


[{"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
x( X軸 )
列表 設定值
欄位 x
類型 linear
優化數據範圍 開啟
y( y軸 )
列表 設定值
欄位 y
啟用 關閉
線圖(line)
列表 設定值
欄位

x*y

類型 線圖
顏色 #ff8800
大小 2
列表 設定值
類型 極坐標系

其它

其它

路徑圖

預覽圖


路徑圖.png

設定值


[{
  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
路徑圖( path)
列表 設定值

欄位

price*consumption
類型 路徑圖
顏色 #1890ff
點圖( point )
列表 設定值
欄位 price*consumption
類型 點圖
形狀 circle
大小 4

更多應用範例

更多應用範例

染色區域折線圖

預覽圖


染色走勢圖.PNG

設定值


[
{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
線圖(line)
列表 設定值

欄位

year*change
類型 線圖
形狀 smooth
區域圖(area)
列表 設定值
欄位 year*change
類型 區域圖
顏色 #ffffff
分段著色- 漲 ( #FF4D4F )
列表 設定值
繪製在最上層 開啟
起始位置 min,max
結束位置 max,0
顏色
#FF4D4F
分段著色- 跌 (#18a1cd)
列表 設定值
繪製在最上層 開啟
起始位置 min,0
結束位置 max,min
顏色
#18a1cd
更多應用範例

折線柱狀圖

預覽圖


折線柱狀圖.PNG

設定值


[
    { 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
列表 設定值
欄位 people
類型 linear
最小值 0
最大值 5
time(X軸
列表 設定值
欄位 time
啟用 開啟
標籤 - 文字樣式 - 大小 18
刻度線 - 長度 5
網格 - 類型
網格 - 線條樣式 - 顏色
#ffffff
網格 - 線條樣式 - 透明度 100
people(Y軸)
列表 設定值
欄位 people
啟用 開啟
標籤 - 文字樣式 - 顏色
#fdae6b
柱狀圖( interval )
列表 設定值
欄位

time*waiting

類型 柱狀圖

顏色

#3182bd

線圖(line)
列表 設定值
欄位 time*people
類型 線圖
顏色 #fdae6b
形狀 smooth
大小 3
點圖(point)
列表 設定值
欄位 time*people
類型 點圖
顏色 #fdae6b
形狀 circle
大小 4