Skip to content

Commit

Permalink
docs: Translate docs to japanese apertureless#400 (apertureless#458)
Browse files Browse the repository at this point in the history
* tlanslate landing page to Japanese apertureless#400

* tlanslate guide to Japanese apertureless#400

* tlanslate api docs to Japanese apertureless#400
  • Loading branch information
euledge authored and apertureless committed Mar 18, 2019
1 parent 649b16e commit 5fa95af
Show file tree
Hide file tree
Showing 3 changed files with 616 additions and 7 deletions.
14 changes: 7 additions & 7 deletions docs/ja/README.md
Original file line number Diff line number Diff line change
@@ -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
---
130 changes: 130 additions & 0 deletions docs/ja/api/README.md
Original file line number Diff line number Diff line change
@@ -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` でアクセスできます。
Loading

0 comments on commit 5fa95af

Please sign in to comment.