mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
3 Commits
v3.2.1
...
fix/depend
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
92ca2f7295 | ||
|
|
1e046e828e | ||
|
|
256eec9518 |
@@ -6,7 +6,7 @@ search: ja
|
|||||||
**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
|
**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のオブジェクト使用して柔軟にカスタマイズできます。
|
chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
|
||||||
|
|
||||||
@@ -41,7 +41,7 @@ export default {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
renderChart()メソッドに2つの引数を渡すことができます:
|
`renderChart()`メソッドに2つの引数を渡すことができます:
|
||||||
|
|
||||||
- Data object
|
- Data object
|
||||||
- Options object
|
- Options object
|
||||||
@@ -64,16 +64,18 @@ renderChart()メソッドに2つの引数を渡すことができます:
|
|||||||
```
|
```
|
||||||
|
|
||||||
詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
|
詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
|
||||||
|
|
||||||
## プロパティ
|
## プロパティ
|
||||||
|
|
||||||
BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
|
BaseChartsには基本プロパティがいくつか定義されています。 `extend()`したときにそれらは *表示されていません* が、使用するときに上書きして設定することができます。
|
||||||
|
|
||||||
| プロパティ | 説明 |
|
| プロパティ | 説明 |
|
||||||
|---|---|
|
|---|---|
|
||||||
| width | chartの表示幅 |
|
| width | chartの表示幅 |
|
||||||
| height | chartの表示高さ |
|
| height | chartの表示高さ |
|
||||||
| chart-id | canvas要素のid |
|
| chart-id | canvas要素のid |
|
||||||
|
| css-classes | 周囲のdivのCSSクラスの文字列 |
|
||||||
|
| styles | 周囲のdivコンテナのCSSスタイルを持つオブジェクト |
|
||||||
|
|
||||||
## 実装例
|
## 実装例
|
||||||
|
|
||||||
@@ -115,7 +117,7 @@ export default {
|
|||||||
```
|
```
|
||||||
|
|
||||||
<p class="warning">
|
<p class="warning">
|
||||||
`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
固定値の`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
### コンポーネント内のローカルデータを使用する場合
|
### コンポーネント内のローカルデータを使用する場合
|
||||||
@@ -147,8 +149,7 @@ export default {
|
|||||||
|
|
||||||
### コンポーネントの再利用
|
### コンポーネントの再利用
|
||||||
|
|
||||||
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
|
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することがベストです。このようにしてチャートコンポーネントは純粋なデータ表示と、背後にあるロジックのラッパーとしてのみ責務を負います。単一ページアプリケーションを実行している場合や、たとえば laravel などで統合されている場合は、異なった方法があります。
|
||||||
|
|
||||||
|
|
||||||
## リアクティブデータ
|
## リアクティブデータ
|
||||||
|
|
||||||
@@ -182,7 +183,8 @@ export default {
|
|||||||
mixins: [reactiveProp],
|
mixins: [reactiveProp],
|
||||||
props: ['options'],
|
props: ['options'],
|
||||||
mounted () {
|
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)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -259,7 +261,24 @@ export default {
|
|||||||
|
|
||||||
## Chart.js オブジェクト
|
## 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 {
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
### 散布図
|
||||||
|
|
||||||
|
このチャートは、他のものとは異なるデータ構造を持っています。現在のところ、reactive mixins はこのチャートタイプでは機能していません。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
## ビルド方法の違い
|
## ビルド方法の違い
|
||||||
あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
|
あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
|
||||||
@@ -320,3 +344,13 @@ Vue.jsとChart.jsは `peerDependencies` なので別にインストールする
|
|||||||
|
|
||||||
### Webpack 2
|
### Webpack 2
|
||||||
Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
|
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/)
|
||||||
10646
package-lock.json
generated
10646
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
package.json
@@ -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",
|
"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"
|
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
|
||||||
},
|
},
|
||||||
"dependencies": {},
|
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "2.7.x"
|
"chart.js": "2.7.x"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.0.0-beta.31",
|
"@babel/cli": "^7.0.0-beta.42",
|
||||||
"@babel/core": "^7.0.0-beta.31",
|
"@babel/core": "^7.0.0-beta.42",
|
||||||
"@babel/preset-env": "^7.0.0-beta.31",
|
"@babel/preset-env": "^7.0.0-beta.42",
|
||||||
"@babel/preset-stage-2": "^7.0.0-beta.31",
|
"@babel/preset-stage-2": "^7.0.0-beta.42",
|
||||||
"babel-loader": "8.0.0-beta.0",
|
"babel-loader": "8.0.0-beta.0",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"chart.js": "2.7.0",
|
"chart.js": "2.7.2",
|
||||||
"chromedriver": "^2.28.0",
|
"chromedriver": "^2.28.0",
|
||||||
"connect-history-api-fallback": "^1.1.0",
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
"cross-env": "^5.1.1",
|
"cross-env": "^5.1.1",
|
||||||
@@ -115,12 +114,12 @@
|
|||||||
"sinon": "^2.1.0",
|
"sinon": "^2.1.0",
|
||||||
"sinon-chai": "^2.9.0",
|
"sinon-chai": "^2.9.0",
|
||||||
"url-loader": "^0.5.8",
|
"url-loader": "^0.5.8",
|
||||||
"vue": "2.5.2",
|
"vue": "2.5.16",
|
||||||
"vue-hot-reload-api": "2.1.0",
|
"vue-hot-reload-api": "2.3.0",
|
||||||
"vue-html-loader": "^1.2.4",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-loader": "^13.3.0",
|
"vue-loader": "^14.2.1",
|
||||||
"vue-style-loader": "3.0.1",
|
"vue-style-loader": "4.0.2",
|
||||||
"vue-template-compiler": "2.5.2",
|
"vue-template-compiler": "2.5.16",
|
||||||
"webpack": "^3.7.1",
|
"webpack": "^3.7.1",
|
||||||
"webpack-dev-middleware": "^1.10.1",
|
"webpack-dev-middleware": "^1.10.1",
|
||||||
"webpack-hot-middleware": "^2.17.1",
|
"webpack-hot-middleware": "^2.17.1",
|
||||||
|
|||||||
Reference in New Issue
Block a user