Skip to content

Commit 5fa95af

Browse files
euledgeapertureless
authored andcommitted
docs: Translate docs to japanese #400 (#458)
* tlanslate landing page to Japanese #400 * tlanslate guide to Japanese #400 * tlanslate api docs to Japanese #400
1 parent 649b16e commit 5fa95af

File tree

3 files changed

+616
-7
lines changed

3 files changed

+616
-7
lines changed

docs/ja/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
home: true
33
heroImage: /vue-chartjs.png
4-
actionText: Get Started
4+
actionText: 初めに
55
actionLink: /guide/
66
features:
7-
- title: Easy
8-
details: Easy for both beginners and pros 🙌
9-
- title: Extendable
10-
details: Simple to use, easy to extend 💪
11-
- title: Powerfull
12-
details: With the full power of chart.js 💯
7+
- title: 簡単
8+
details: 初心者にもプロにも簡単に始められる 🙌
9+
- title: 拡張性
10+
details: シンプルに使えて、拡張も簡単 💪
11+
- title: 強力
12+
details: chart.jsのフルパワーを持っている 💯
1313
footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak
1414
---

docs/ja/api/README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# コーディング レファレンス
2+
3+
## Props
4+
5+
`vue-chartjs`によって提供されるコンポーネントにはいくつかの基本的なプロパティが定義されています。 `拡張`しているので、それらは *見えない* ですが、それらの値は上書きすることができます:
6+
7+
| Prop名 | 説明 |
8+
|---|---|
9+
| width | チャート幅 |
10+
| height | チャート高さ |
11+
| chart-id | canvas要素のid |
12+
| css-classes | 囲んでいる div の css クラス (文字列) |
13+
| styles | 囲んでいる div の css クラス (オブジェクト) |
14+
| plugins | chartjs プラグイン (配列) |
15+
16+
## Events
17+
18+
`reactData`または` reactProp`ミックスインが使用されている場合、以下のイベントが発行されます。
19+
20+
| Event名 | 説明|
21+
|---|---|
22+
| `chart:render` | ミックスインが完全にレンダリングしたとき |
23+
| `chart:destroy` | ミックスインがチャートオブジェクトインスタンスを削除したとき |
24+
| `chart:update` | ミックスインが再レンダリングの代わりに更新をしたとき |
25+
| `labels:update` | labelsがセットされたとき |
26+
| `xlabels:update` | xlabelsがセットされたとき |
27+
| `ylabels:update` | ylabelsがセットされたとき |
28+
29+
## Global Methods
30+
グローバルメソッドはインポートして使用します。
31+
32+
### generateChart
33+
34+
- **Type:** `Function`
35+
- **Arguments**: `chart-id`, `chart-type`
36+
- **Usage:**
37+
38+
```js
39+
import { generateChart } from 'vue-chartjs'
40+
// First argument is the chart-id, second the chart type.
41+
const CustomLine = generateChart('custom-line', 'LineWithLine')
42+
```
43+
44+
## Instance Methods
45+
46+
インスタンスメソッドは独自のチャートコンポーネント内で使用することができます。
47+
48+
49+
### generateLegend()
50+
51+
HTMLの凡例を作成するヘルパー関数
52+
53+
- **Type:** `Function`
54+
- **Arguments**: `none`
55+
- **Usage:**
56+
57+
```js {11}
58+
import { Line } from 'vue-chartjs'
59+
60+
export default {
61+
extends: Line,
62+
props: ['datasets', 'options']
63+
data: () => ({
64+
htmlLegend: null
65+
})
66+
mounted () {
67+
this.renderChart(this.datasets, this.options)
68+
this.htmlLegend = this.generateLegend()
69+
}
70+
}
71+
72+
```
73+
74+
### プラグインの追加
75+
76+
Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。 グローバルプラグインは、[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)で説明されているように`vue-chartjs`でも問題なく動作します。
77+
78+
79+
インラインプラグインを追加したい場合に備えて、`vue-chartjs``addPlugin()`と呼ばれるヘルパーメソッドを公開します。
80+
81+
`renderChart()`メソッドの前に `addPlugin()`を呼び出すべきです。
82+
83+
- **Type:** `Function`
84+
- **Arguments**: `Array` of Plugins
85+
- **Usage:**
86+
87+
```js
88+
mounted () {
89+
this.addPlugin({
90+
id: 'my-plugin',
91+
beforeInit: function (chart) {
92+
....
93+
}
94+
})
95+
}
96+
```
97+
98+
### renderChart()
99+
100+
Chart.js のインスタンスを作成して描画します。
101+
102+
- **Type:** `Function`
103+
- **Arguments**: `Chart Data`, `Chart Options`
104+
- **Usage:**
105+
106+
```js
107+
mounted () {
108+
this.renderChart({
109+
labels: ['January', 'February'],
110+
datasets: [
111+
{
112+
label: 'Data One',
113+
backgroundColor: '#f87979',
114+
data: [40, 20]
115+
}
116+
]},
117+
{
118+
responsive: true
119+
}
120+
)
121+
}
122+
```
123+
124+
## Chart.js オブジェクト
125+
126+
独自のチャートコンポーネント内からChart.jsのオブジェクトには `this.$data._chart` でアクセスできます。
127+
128+
## Canvas
129+
130+
Canvas要素には `this.$refs.canvas` でアクセスできます。

0 commit comments

Comments
 (0)