# 快速上手
wx-chart是一個跨平臺的圖形庫，適用于普通的網站，也可應用于微信小程序環境，并且在各種環境下使用方式是一致的。
### 安裝
使用npm下載： npm install wx-chart --save-dev
使用bower下載：bower install wx-chart
### 聲明節點
```html
<canvas id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;"></canvas>
```
### 引用庫 & 使用
最后我們創建一個簡單的線性圖表
```js
import { WxLiner } from 'wx-chart';
// 實例化一個線狀圖
var wxLiner = new .WxLiner('myCanvas', { //myCanvas 為節點的ID值
width: 600,
height: 400,
title: '銷售量',
legends: [{
text: '巧克力'
}]
});
// 更新數據
wxLiner.update([{
value: 10,
label: '一月'
}, {
value: 40,
label: '二月'
}, {
value: 35,
label: '三月'
}, {
value: 56,
label: '四月'
}, {
value: 71,
label: '五月'
}]);
```
搞定，一個簡單的線圖誕生了。可以看到在我們引用wx-chart后，全局變量 `WxChart` 中就包含的我們所需的圖形庫類。在進行初始化后，使用 `update` 方法便可以更新我們的數據部分，從而觸發圖形渲染。
## 用在微信小程序中
在微信小程序中的使用方法與WEB站點部署類似
首先在 `view` 聲明一個Canvas節點,請注意需要聲明 `canvas-id`
```html
<view class="container">
<canvas canvas-id="myCanvas" style="width:600px; height:400px; border: 1px solid #ffffff;"></canvas>
</view>
```
而后將wx-chart的工程文件加入小程序工程，并引用
```js
let WxChart = require("you/path/wx-chart.min.js");
// 初始化
let wxLiner = new WxChart.WxLiner('myCanvas', { //options });
// 加載數據
wxLiner.update({ //datas... });
```
可以參見在 [小程序實例](https://github.com/xch89820/wx-chart-demo)
## React結合
參見[部署-React結合](gettingstarted/deployment.md#react) 章節
