docs: Chinese docs #400 (#525)

docs: Chinese docs #400

docs/.vuepress/config.js

@@ -26,15 +26,26 @@ module.exports = {
         },
       },
       '/zh-cn/': {
-        selectText: 'Languages',
+        selectText: '选择语言',
         label: '中文(简体)',
-        editLinkText: 'Edit this page on GitHub',
+        sidebar: 'auto',
+        editLinkText: '在GitHub上编辑本页',
+        nav: [
+          {
+            text: '指南',
+            link: '/zh-cn/guide/'
+          },
+          {
+            text: 'API 参考',
+            link: '/zh-cn/api/'
+          }
+        ],
         serviceWorker: {
           updatePopup: {
-            message: "New content is available.",
-            buttonText: "Refresh"
+            message: "有新内容更新.",
+            buttonText: "刷新"
           }
-        },
+        }
       },
       '/id/': {
         selectText: 'Languages',
@@ -106,7 +117,7 @@ module.exports = {
     '/zh-cn/': {
       lang: 'zh-CN',
       title: '📈 vue-chartjs',
-      description: '⚡ Easy and beautiful charts with Chart.js and Vue.js'
+      description: '⚡ 使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表'
     },
     '/id/': {
       lang: 'id',

docs/zh-cn/README.md

@@ -1,14 +1,14 @@
 ---
 home: true
 heroImage: /vue-chartjs.png
-actionText: Get Started →
-actionLink: /guide/
+actionText: 起步 →
+actionLink: /zh-cn/guide/
 features:
-- title: Easy
-  details: Easy for both beginners and pros 🙌
-- title: Extendable
-  details: Simple to use, easy to extend 💪
-- title: Powerful
-  details: With the full power of chart.js 💯
+- title: 简单
+  details: 适合初学者和专业人士 🙌
+- title: 扩展性
+  details: 使用简单, 扩展方便 💪
+- title: 强大
+  details: 拥有 chart.js 的全部功能 💯
 footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak
 ---

docs/zh-cn/api/README.md

@@ -0,0 +1,128 @@
+# 编码参考
+
+## Props
+
+这里有一些`vue-chartjs`提供的基本参数定义. 因为你是 `extend` 他们的, 所以他们是*不可见的*, 但是你可以覆盖他们:
+
+| 参数名 | 描述 |
+|---|---|
+| width | 图表宽度 |
+| height | 图表高度 |
+| chart-id | canvas的id |
+| css-classes |  css类的字符串 |
+| styles |  css 样式对象 |
+| plugins | chartjs 插件数组 |
+
+## 事件
+
+如果 `reactiveData` 或者 `reactiveProp` mixin 被附加, 下面事件将会被调用:
+
+| 事件 | 描述|
+|---|---|
+| `chart:render` | 如果 mixin 执行完全重绘 |
+| `chart:destroy` | 如果 mixin 删除图表对象实例 |
+| `chart:update` | 如果 mixin 执行更新而不是重绘 |
+| `labels:update` | 如果设置了新的labels |
+| `xlabels:update` | 如果设置了新的xLabels |
+| `ylabels:update` | 如果设置了新的yLabels |
+
+
+## 全局方法
+全局方法需要被引入才能使用.
+
+### generateChart
+
+- **类型:** `Function`
+- **参数**: `chart-id`, `chart-type`
+- **使用:**
+
+```js
+import { generateChart } from 'vue-chartjs'
+// 第一个参数是 图表id, 第二个参数是 图表类型.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+```
+
+## 实例方法
+
+实例方法可以在你图表组件内部使用.
+
+### generateLegend()
+
+用来生成HTML说明的工具函数.
+
+- **类型:** `Function`
+- **参数**: `none`
+- **使用:**
+
+```js {11}
+import { Line } from 'vue-chartjs'
+
+export default {
+  extends: Line,
+  props: ['datasets', 'options']
+  data: () => ({
+    htmlLegend: null
+  })
+  mounted () {
+    this.renderChart(this.datasets, this.options)
+    this.htmlLegend = this.generateLegend()
+  }
+}
+
+```
+
+### addPlugin
+
+在 Chart.js 你可以定义全局和内联插件. 全局插件在没有 `vue-chartjs`也可以工作. 就像这个文档[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) 描述的.
+
+如果你需要添加内联插件, `vue-chartjs` 暴露出来了一个工具方法 `addPlugin()`
+你可以在`renderChart()`方法前调用`addPlugin()`.
+
+- **类型:** `Function`
+- **参数**: `Array` 插件数组
+- **使用:**
+
+```js
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
+### renderChart()
+
+创建一个 Chart.js 实例, 并渲染图表
+
+- **类型:** `Function`
+- **参数**: `Chart Data`, `Chart Options`
+- **使用:**
+
+```js
+mounted () {
+  this.renderChart({
+    labels: ['January', 'February'],
+    datasets: [
+      {
+        label: 'Data One',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+```
+
+## Chart.js 对象
+
+你可以在你的图表组件里, 通过 `this.$data._chart` 访问 Chart.js 对象
+
+## Canvas
+
+你可以通过 `this.$refs.canvas` 访问 canvas