# 线形图
线形图是最基础的图形，其实现类为`WxLiner`。WxLiner支持基础线形图，区域线形图等几种绘图展示形式。
## <span id="init">简单实例</span>
如果要使用线形图，则需要引用 `WxLiner` 并初始化一个图形库。在[基础](base.md)章节，我们了解到所有的图形，首个参数为图形所使用的的Canvas画布的id（或微信小程序中的canvas-id）或者HTMLElement节点。第二个参数为图形实例的详细设置项。
让我们做一个最简单的例子：
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
width: 700,
height: 400,
title: '北京分公司业务销量趋势图',
yScaleOptions: {
position: 'left',
title: '人民币(万)'
},
legends:[{
text: '销售额'
}]
});
wxLiner.update([{
value: 1,
label: '一月'
}, {
value: 40,
label: '二月'
}, {
value: 35,
label: '三月'
}, {
value: 56,
label: '四月'
}, {
value: 71,
label: '五月'
}]);
```
在上面的例子中，我们绘制了一个最简单的线形图，描述了某公司近5个月的总销售额。可以看到，线性图的设置都比较易懂。
唯一值得注意的有两点。第一，由于我们没有设置线状图的颜色，所以系统会自动分配一个颜色；其二，如果感觉一条曲线没有必要画图例的话，你可以在图形中增加以下配置：
```js
legendOptions:{
display: false
}
```
但是，**必须**保留`legends`的配置，该配置用于唯一标识图形的每根线。
## <span id="init">多图例</span>
当需要绘制多个线条时，你只需要基于上面的例子，多增加几项配置；一是在`legends`增加你新增的线条标识，二是在数据中根据你的标识增加相应的值。
让我们看一个稍微复杂一点的多线条图的实例
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
width: 700,
height: 400,
title: '北京-上海分公司业务销量对比',
yScaleOptions: {
position: 'left',
title: '人民币(万)'
},
legends:[{
text: '北京',
key: 'bj',
fillStyle: '#3385ff',
strokeStyle: '#3385ff'
}, {
text: '上海',
key: 'sh',
}]
});
wxLiner.update([{
bj: 10,
sh: 20,
label: '一月'
}, {
bj: 40,
sh: 115,
label: '二月'
}, {
bj: 35,
sh: 34.5,
label: '三月'
}, {
bj: 56,
sh: 22,
label: '四月'
}, {
bj: 71,
sh: 56,
label: '五月'
}]);
```
上面的多线条实例中，我们可以看出，我们在`legends`设置中定义了“北京”与“上海”两个线条图例，并且还单独设置了北京的图例颜色（简单学习过Canvas的同学应该了解，fillStyle为填充颜色，strokeStyle为线条颜色）；
需要注意的是我们的更新的数据，我们的数据并不像单线条那样使用默认的key值： `value` ，来代表数值，而是在`legends`设置中自定义了key值：`bj` 和 `sh`。
## <span id="init">应对数据缺失</span>
在我们绘制复杂线形图时，有可能会有某一个节点数据缺失。一般来说，我们会有两种方法来应对：断开曲线 或者 假装补齐。
WxLine通过`spanGaps`来支持这两种方式，默认的`spanGaps`的值为`false`，即断开曲线。我们来看下两者的差别。
```js
let wxLiner = new WxLiner('myCanvas', {
...
legends:[{
text: '北京',
key: 'bj',
fillStyle: '#3385ff',
strokeStyle: '#3385ff'
}, {
text: '上海',
key: 'sh',
// spanGaps : false //默认的
}]
});
```
```js
let wxLiner = new WxLiner('myCanvas', {
...
legends:[{
text: '北京',
key: 'bj',
fillStyle: '#3385ff',
strokeStyle: '#3385ff'
}, {
text: '上海',
key: 'sh',
spanGaps : true
}]
});
```
## <span id="init">起始点？</span>
上面的例子中，你会发现我们的X轴起始点不在顶点，有时候感觉这很变扭。我们可以通过在图形中增加
```js
crossScaleOptions: {
xFirstPointSpace: 0
}
```
这项设置来将起始点变为顶点。(注：这其实是[区域组件-交叉轴](component.md#crossScale)中的一个设置项）
## <span id="fillArea">填充线形图</span>
为了让我的图形变的更好看，我们可以在`legends`设置`fillArea`属性，这个属性会用颜色填充X轴与线图之间的空隙。像下图所示：
```js
let wxLiner = new WxLiner('myCanvas', {
width: 700,
height: 400,
title: '北京-上海分公司业务销量对比',
crossScaleOptions: {
'xFirstPointSpace': 0
},
yScaleOptions: {
position: 'left',
title: '人民币(万)'
},
legends:[{
text: '北京',
key: 'bj',
fillStyle: '#3385ff',
strokeStyle: '#3385ff',
fillArea: true
}, {
text: '上海',
key: 'sh',
fillArea: true
}]
});
```
## <span id="stacked">堆栈线形图</span>
像其他图形库一样，wxChart也支持堆栈式线图形。在图形中设置 `stacked:true` 即得到一个线性的堆栈图形。如下所示：
需要注意的是，堆栈图是在 0 届两端分别累加的，例如上图第一点数据为：
```js
{
bj: -20,
sh: 20,
label: '一月'
}
```
你会发现一月的的数值累加为0（20 + （-20） = 0），但是栈式图形描绘了0界上下各两个点。这与[柱状图](bar.md)中的堆栈式图逻辑保持一致。
在某些需求中，你需要**去除负值**（例如：上图中北京销售量值为负明显就是错误数据）。你可以设置`discardNeg: true`来在绘制堆栈式图时使负值归零。
## <span id="smooth">线形图平滑</span>
默认的，线形图两点之间会进行平滑处理，原理可参见Rob Spencer, 2010的文章[Spline Interpolation](http://scaledinnovation.com/analytics/splines/aboutSplines.html)。如果需要关闭平滑处理，你需要将每一个`legend`中的`tension`值设置为0。
```js
let wxLiner = new WxLiner('myCanvas', {
...,
legends:[{
text: '北京',
key: 'bj',
fillArea: true,
tension: 0
}, {
text: '上海',
key: 'sh',
fillArea: true
}]
});
```
