docs: Translate docs to japanese #400 (#458)

* tlanslate landing page to Japanese #400

* tlanslate guide to Japanese #400

* tlanslate api docs to Japanese #400

docs/ja/README.md

@@ -1,14 +1,14 @@
 ---
 home: true
 heroImage: /vue-chartjs.png
-actionText: Get Started →
+actionText: 初めに →
 actionLink: /guide/
 features:
-- title: Easy
-  details: Easy for both beginners and pros 🙌
-- title: Extendable
-  details: Simple to use, easy to extend 💪
-- title: Powerfull
-  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/ja/api/README.md

@@ -0,0 +1,130 @@
+# コーディング レファレンス
+
+## Props
+
+`vue-chartjs`によって提供されるコンポーネントにはいくつかの基本的なプロパティが定義されています。 `拡張`しているので、それらは *見えない* ですが、それらの値は上書きすることができます：
+
+| Prop名 | 説明 |
+|---|---|
+| width | チャート幅 |
+| height | チャート高さ |
+| chart-id | canvas要素のid |
+| css-classes | 囲んでいる div の css クラス (文字列) |
+| styles | 囲んでいる div の css クラス (オブジェクト) |
+| plugins | chartjs プラグイン (配列) |
+
+## Events
+
+`reactData`または` reactProp`ミックスインが使用されている場合、以下のイベントが発行されます。
+
+| Event名 | 説明|
+|---|---|
+| `chart:render` | ミックスインが完全にレンダリングしたとき |
+| `chart:destroy` | ミックスインがチャートオブジェクトインスタンスを削除したとき |
+| `chart:update` | ミックスインが再レンダリングの代わりに更新をしたとき |
+| `labels:update` | labelsがセットされたとき |
+| `xlabels:update` | xlabelsがセットされたとき |
+| `ylabels:update` | ylabelsがセットされたとき |
+
+## Global Methods
+グローバルメソッドはインポートして使用します。
+
+### generateChart
+
+- **Type:** `Function`
+- **Arguments**: `chart-id`, `chart-type`
+- **Usage:**
+
+```js
+import { generateChart } from 'vue-chartjs'
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+```
+
+## Instance Methods
+
+インスタンスメソッドは独自のチャートコンポーネント内で使用することができます。
+
+
+### generateLegend()
+
+HTMLの凡例を作成するヘルパー関数
+
+- **Type:** `Function`
+- **Arguments**: `none`
+- **Usage:**
+
+```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()
+  }
+}
+
+```
+
+### プラグインの追加
+
+Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。 グローバルプラグインは、[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)で説明されているように`vue-chartjs`でも問題なく動作します。 
+
+
+インラインプラグインを追加したい場合に備えて、`vue-chartjs`は`addPlugin()`と呼ばれるヘルパーメソッドを公開します。
+
+`renderChart()`メソッドの前に `addPlugin()`を呼び出すべきです。
+
+- **Type:** `Function`
+- **Arguments**: `Array` of Plugins
+- **Usage:**
+
+```js
+mounted () {
+  this.addPlugin({
+    id: 'my-plugin',
+    beforeInit: function (chart) {
+      ....
+    }
+  })
+}
+```
+
+### renderChart()
+
+Chart.js のインスタンスを作成して描画します。
+
+- **Type:** `Function`
+- **Arguments**: `Chart Data`, `Chart Options`
+- **Usage:**
+
+```js
+mounted () {
+  this.renderChart({
+    labels: ['January', 'February'],
+    datasets: [
+      {
+        label: 'Data One',
+        backgroundColor: '#f87979',
+        data: [40, 20]
+      }
+    ]},
+    {
+      responsive: true
+    }
+  )
+}
+```
+
+## Chart.js オブジェクト
+
+独自のチャートコンポーネント内からChart.jsのオブジェクトには `this.$data._chart` でアクセスできます。
+
+## Canvas
+
+Canvas要素には `this.$refs.canvas` でアクセスできます。