diff --git a/docs/ja/README.md b/docs/ja/README.md index 3e58395b..6fcf3279 100644 --- a/docs/ja/README.md +++ b/docs/ja/README.md @@ -6,7 +6,7 @@ search: ja **vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 ## イントロ -`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。 +`vue-chartjs` vueの中であまり面倒ことがなくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。 chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。 @@ -41,7 +41,7 @@ export default { } ``` -renderChart()メソッドに2つの引数を渡すことができます: +`renderChart()`メソッドに2つの引数を渡すことができます: - Data object - Options object @@ -64,16 +64,18 @@ renderChart()メソッドに2つの引数を渡すことができます: ``` 詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。 + ## プロパティ -BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。 +BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。 | プロパティ | 説明 | |---|---| | width | chartの表示幅 | | height | chartの表示高さ | | chart-id | canvas要素のid | - +| css-classes | 周囲のdivのCSSクラスの文字列 | +| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト | ## 実装例 @@ -115,7 +117,7 @@ export default { ```
-`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。 +固定値の`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
### コンポーネント内のローカルデータを使用する場合 @@ -147,8 +149,7 @@ export default { ### コンポーネントの再利用 -チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。 - +チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。 ## リアクティブデータ @@ -182,7 +183,8 @@ export default { mixins: [reactiveProp], props: ['options'], mounted () { - // this.chartData is created in the mixin + // this.chartData is created in the mixin. + // If you want to pass options please create a local options object this.renderChart(this.chartData, this.options) } } @@ -259,7 +261,24 @@ export default { ## Chart.js オブジェクト -場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this.$data._chart` を使ってアクセスします。 +時にはchart.jsをより詳細に制御する必要があります。そのためには `this.$data._chart` を使ってChart.jsインスタンスにアクセスすることができます。 + +## インライン プラグイン + +Chart.jsでは、グローバルプラグインとインラインプラグインを定義できます。[Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html)で記載されているのようなグローバルプラグインは、 `vue-chartjs ` で問題なく動作しています。 + +### Example + +```javascript +mounted () { + this.addPlugin({ + id: 'my-plugin', + beforeInit: function (chart) { + .... + } + }) +} +``` ## 利用可能なグラフ @@ -293,6 +312,11 @@ export default { ![Bubble](../assets/bubble.png) +### 散布図 + +このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。 + +![Scatter](../assets/scatter.png) ## ビルド方法の違い あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。 @@ -320,3 +344,13 @@ Vue.jsとChart.jsは `peerDependencies` なので別にインストールする ### Webpack 2 Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。 + +## Resources + +以下に `vue-chartjs` の使い方に関するチュートリアルのようなリソースがあります + +- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f) +- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a) +- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44) +- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf) +- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/) \ No newline at end of file