# <span id="basic">基礎</span>
本章節將循序漸進的介紹基礎的圖形使用，以及使用中需要注意的相關問題。也會介紹整個圖形配合React以及微信小程序環境下的使用。
## <span id="init">初始化</span>
在 [部署](gettingstarted/deployment.md) 本實例后。如果你并非使用React框架，則你需要在HTML中添加canvas節點。
```html
<canvas id="myCanvas" canvas-id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;"></canvas>
```
而后使用 `new` 字符聲明一個圖形庫實例，如下所示：
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
width: 700,
height: 400,
title: '測試線狀圖',
legends:[{
text: '測試圖1'
}]
});
```
所有的實例初始化，均需要傳入兩個參數。首參數為圖形所使用的的Canvas畫布的id（或微信小程序中的canvas-id）或者*HTMLElement*節點。第二個參數為圖形實例的詳細設置項。
每個圖形實例均有 __基礎設置__
| 參數 | 類型 | 說明 | 默認值 |
| ------------- |:-------------:|:----------------|:-------:|
| width | number |寬度（小程序中必填）| 300 |
| height | number |高度（小程序中必填）| 200 |
| title | string |標題 | |
| display | Boolean |展示 | true |
| color | Object |[顏色設置](#color) | { hue: 'red', luminosity: 'light'} |
在設置項中也包含 __區域組件設置__，這些用來設置每個區域組件的展示個布局，包括：
| 參數 | 類型 | 說明 | 默認值 |
| ------------- |:-------------:|:----------------|:-------:|
| title | string or Object|圖表抬頭 | |
| legends | Array |圖例定義項 | 200 |
| legendOptions | Object |圖例設置項 | {position: 'bottom'} |
| xScaleItemOptions| Object |X軸定義項默認值 | |
| xScaleOptions | Object |X軸設置項 | |
| yScaleItemOptions| Object |Y軸定義項默認值 | {position: 'left'} |
| yScaleOptions | Object |Y軸設置項 | |
| crossScaleOptions | Object |交叉設置項 | |
這些設置的具體會在 [區域組件](component.md) 章節中會做詳細介紹。
## <span id="update">更新數據</span>
初始化后，圖表不會立即渲染。需要使用 `update` 方法更新數據后，才會觸發渲染。
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {...});
wxLiner.update([{
value: 1,
label: '一月'
}, {
value: 40,
label: '二月'
}, {
value: 35,
label: '三月'
}, {
value: 56,
label: '四月'
}, {
value: 71,
label: '五月'
}]);
```
`update` 方法需要傳入一個數組。其中的每一項表示一個X軸維度的數據集合。
需要特別注意的是，根據[圖例](component.md#legend)的數量，數據的取值方式也會略有不同：
* 當圖例__僅有一個__時，或者類似于餅圖這種只能有一個圖例的圖形時，程序默認會從 `value` 中去的值。
* 當圖例__有多個__時，程序默認會從 `legends`定義中，對應每個定義項目的 `key`設置，并讀取每個數據集合中對應名稱的值。
例如：
```js
import { WxLiner } from 'wx-chart';
let wxLiner = new WxLiner('myCanvas', {
...,
legends: [{
text: '日用品',
key: 'dailyNecessities'
}, {
text: '水果',
key: 'fruit'
}, {
text: '家電',
key: 'appliances'
}]
});
wxElement.update([{
dailyNecessities: 1,
fruit: 10,
appliances: 30,
label: '一月'
}, {
dailyNecessities: 20,
fruit: 50,
appliances: 10,
label: '二月'
}, ...});
```
## <span id="color">顏色相關</span>
圖形庫內嵌 [randomColor](https://github.com/davidmerfield/randomColor)，默認的能夠隨機生成顏色，默認生成紅色系為基礎色系的顏色。通過設置圖形的 `color` 選項可以設置隨機顏色的色系和光度。
例如，設置為亮色藍色系：
```js
let wxLiner = new WxLiner('myCanvas', {
color: {
luminosity: 'light',
hue: 'blue'
}
...
});
```
詳細設置參見 [randomColor文檔](https://github.com/davidmerfield/randomColor)
當然，你也可以自己控制每個圖形的顏色。通常來講，在圖例配置中可以做相應設置，以線狀圖為例：
```js
let wxLiner = new WxLiner('myCanvas', {
...,
legends:[{
text: '日用品',
key: 'dailyNecessities',
fillArea: true,
fillStyle: '#3385ff',
strokeStyle: '#3385ff'
}, {
text: '水果',
key: 'fruit',
strokeStyle: '#238456'
}, {
text: '家電',
key: 'appliances'
}]
});
```
上述例子中，`fillStyle` 與 `strokeStyle` 屬性，分別配置每個線圖圖例的填充顏色和線的顏色。
## <span id="lifecycle">生命周期</span>
圖形庫每個實例維護自身的生命周期，幾個關鍵周期以及相應函數如下：
* 初始化 (new 實例化后）
* 做相應清理
* 初始化畫布
* 配置以及相關組件
* 更新數據 `update`
* 圖像繪畫 `draw`
* 清除圖形 `clear`
* 繪畫組件（標題，圖例，軸）
* 圖像銷毀 `destroy`
* 清除圖形 `clear`
* 重置畫布屬性
## <span id="react">React結合</span>
React中的使用方法與正常的使用方法基本一致。參數的傳入是通過在jsx中傳入相關屬性完成。
首先你需要按照 [部署-React](gettingstarted/deployment.md#react) 章節中的實例去部署，而后使用 `ReactDOM.render` 方法渲染。
```js
import React from 'react';
import ReactDOM from 'react-dom';
import WxLinerReact from 'wx-chart';
let body = document.body;
let linerProps = {
width: 700,
height: 400,
title: '測試線狀圖',
legends:[{
text: '測試圖1'
}]
};
// 直接使用...符號將props傳入組件
const wxElement = ReactDOM.render(<WxLinerReact {...linerProps}></WxLinerReact>, body);
// 更新數據
wxElement.update({...});
// 銷毀
// ReactDOM.unmountComponentAtNode(document.body);
```
## <span id="wx">微信小程序結合</span>
微信小程序中的使用方式，除了 [部署-微信小程序](gettingstarted/deployment.md#wx) 略有區別之外，其他基本一致。
