# 線形圖
線形圖是最基礎的圖形，其實現類為`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
}]
});
```
