柱狀圖
基礎柱狀圖,使用垂直的柱子顯示類別之間的數值比較。其中一個軸表示需要對比的分類尺寸,另一個軸代表相應的數值。
基礎柱狀圖
柱狀圖有別於直方圖,柱狀圖無法顯示數據在一個區間內的連續變化趨勢。柱狀圖描述的是分類數據,回答的是每一個分類中“有多少?”這個問題。需要注意的是, 當柱狀圖顯示的分類很多時會導致分類名附加等顯示問題。
預覽圖

設定值
[{
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 |
類型 |
柱狀圖 |
分組柱狀圖
預覽圖

設定值
[{
"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 |
位置 |
下 |
排版 |
水平 |
堆疊柱狀圖
預覽圖

設定值
[{
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 |
位置 |
下 |
排版 |
水平 |
區間柱狀圖
預覽圖

設定值
[{
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 )
基礎條形圖
預覽圖

設定值
[{
country: '巴西',
population: 18203
}, {
country: '印尼',
population: 23489
}, {
country: '美国',
population: 29034
}, {
country: '印度',
population: 104970
}, {
country: '中国',
population: 131744
}]
40, 60, 60, 70
柱狀圖( interval )
列表 |
設定值 |
欄位 |
country*population
|
類型 |
柱狀圖 |
分組條形圖
預覽圖

設定值
[{
"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 |
堆疊條形圖
預覽圖

設定值
[{
'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 |
列表 |
設定值 |
啟用 |
開啟 |
欄位 |
年齡段 |
位置 |
下 |
排版 |
水平 |
區間條形圖
預覽圖

設定值
[{
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
|
類型 |
柱狀圖 |