# 快速上手
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) 章节
