Compare commits

...

3 Commits

Author SHA1 Message Date
Jakub Juszczak
92ca2f7295 Chore: Update dependencies 2018-03-20 20:25:43 +01:00
Jakub
1e046e828e Merge pull request #320 from euledge/update_japanese_docs
update japanese docs
2018-02-26 17:38:31 +01:00
Hitoshi Kuroyanagi
256eec9518 update japanese docs
add properties css-classes, styles in section of property
add section of inline plugin
add scatter example
add section of Resources

and refine tlanslation
2018-02-26 22:25:54 +09:00
4 changed files with 567 additions and 11103 deletions

View File

@@ -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 {
```
<p class="warning">
`width``height` を反映させるためには、 `responsivefalse` を設定しなければならないことに注意してください。
固定値の`width``height` を反映させるためには、 `responsivefalse` を設定しなければならないことに注意してください。
</p>
### コンポーネント内のローカルデータを使用する場合
@@ -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)
- [Lets 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)
- [Lets 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/)

10646
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -56,18 +56,17 @@
"release": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js",
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
},
"dependencies": {},
"peerDependencies": {
"chart.js": "2.7.x"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.31",
"@babel/core": "^7.0.0-beta.31",
"@babel/preset-env": "^7.0.0-beta.31",
"@babel/preset-stage-2": "^7.0.0-beta.31",
"@babel/cli": "^7.0.0-beta.42",
"@babel/core": "^7.0.0-beta.42",
"@babel/preset-env": "^7.0.0-beta.42",
"@babel/preset-stage-2": "^7.0.0-beta.42",
"babel-loader": "8.0.0-beta.0",
"chai": "^3.5.0",
"chart.js": "2.7.0",
"chart.js": "2.7.2",
"chromedriver": "^2.28.0",
"connect-history-api-fallback": "^1.1.0",
"cross-env": "^5.1.1",
@@ -115,12 +114,12 @@
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
"url-loader": "^0.5.8",
"vue": "2.5.2",
"vue-hot-reload-api": "2.1.0",
"vue": "2.5.16",
"vue-hot-reload-api": "2.3.0",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.3.0",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.5.2",
"vue-loader": "^14.2.1",
"vue-style-loader": "4.0.2",
"vue-template-compiler": "2.5.16",
"webpack": "^3.7.1",
"webpack-dev-middleware": "^1.10.1",
"webpack-hot-middleware": "^2.17.1",

951
yarn.lock

File diff suppressed because it is too large Load Diff