# 柱狀圖
柱狀圖是另一個基礎的圖形,其實現類為`WxBar`。WxBar支持基礎柱狀圖,以及棧型柱狀圖。
如果你已經看過[線形圖](book/line.md)的聲明和使用方法,那么相信柱狀圖你也很快的能夠理解。
## <span id="init">簡單實例</span>
這次我們直接繪制一個多圖例的柱狀圖,如下所示

```js
import { WxBar } from 'wx-chart';
let wxBar = new WxBar('myCanvas', {
'width': 700,
'height': 400,
'title': '北京-上海分公司業務銷量對比',
'legends':[{
'text': '北京',
'key': 'bj',
'fillStyle': '#3385ff',
'strokeStyle': '#3385ff'
}, {
'text': '上海',
'key': 'sh',
}],
yScaleOptions: {
position: 'left',
title: '人民幣(萬)'
},
});
wxBar.update([{
bj: 10,
sh: 20,
label: '一月'
}, {
bj: 42,
sh: 115,
label: '二月'
}, {
bj: 38,
sh: 34.5,
label: '三月'
}, {
bj: 56,
sh: 22,
label: '四月'
}, {
bj: 71,
sh: 56,
label: '五月'
}]);
```
可以看到,基本上相關的設置與線形圖一致。并且在沒有設定顏色的情況下,圖形會自動的分配一個顏色。
另外的,柱狀圖的處理異常場景相對簡單,如果出現數據缺失,則直接不繪制即可。
## <span id="init">堆棧柱狀圖</span>
與線性圖相似的是,柱狀圖也可以堆棧化。柱狀圖的堆棧化是以0軸為基礎的兩端棧式延伸,如下圖所示:

```js
import { WxBar } from 'wx-chart';
let wxBar = new WxBar('myCanvas', {
width: 700,
height: 400,
title: '北京-上海分公司環比銷量對比',
stacked: true,
yScaleOptions: {
position: 'left',
title: '百分比'
},
color: {luminosity: 'light'},
//'zeroLine': true,
legends: [{
text: '北京',
key: 'bj'
}, {
text: '上海',
key: 'sh'
},{
text: '深圳',
key: 'sz'
}]
});
wxBar.update([{
bj: 10,
sh: -22,
sz: -40,
label: '一月'
}, {
bj: 42,
sh: 115,
sz: -21,
label: '二月'
}, {
bj: 38,
sh: 34.5,
sz: -1,
label: '三月'
}, {
bj: 56,
sh: 22,
sz: 10,
label: '四月'
}, {
bj: 71,
sh: 56,
sz: 70,
label: '五月'
}]);
```