柱狀圖

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

基礎柱狀圖

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

預覽圖

基礎柱狀圖.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