# 柱状图
柱状图是另一个基础的图形，其实现类为`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: '五月'
}]);
```
