mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
26 Commits
v2.6.0-rc1
...
v2.6.3
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d60c63edbb | ||
|
|
da6789d4ba | ||
|
|
9a780d9922 | ||
|
|
be6f3956cf | ||
|
|
aeee51dfc8 | ||
|
|
92c05b838c | ||
|
|
4be1e8f9da | ||
|
|
3e641ce620 | ||
|
|
fae16ff894 | ||
|
|
c325e573a2 | ||
|
|
78c212f116 | ||
|
|
3e1b5afe7e | ||
|
|
47c1543e6c | ||
|
|
25d3766687 | ||
|
|
1c1ad3c146 | ||
|
|
2791e8ed61 | ||
|
|
06cb7e79f6 | ||
|
|
6211d034e6 | ||
|
|
f32d989334 | ||
|
|
ba11190e39 | ||
|
|
7234292a49 | ||
|
|
c91fee9a1a | ||
|
|
7e7e5d0028 | ||
|
|
2ab4cacf12 | ||
|
|
227f698647 | ||
|
|
8d893eb8b2 |
51
CHANGELOG.md
51
CHANGELOG.md
@@ -1,13 +1,60 @@
|
|||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
|
## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
|
||||||
|
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...HEAD)
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- ⬆️ Update dev dependencies [\#96](https://github.com/apertureless/vue-chartjs/pull/96) ([apertureless](https://github.com/apertureless))
|
||||||
|
|
||||||
|
## [v2.6.1](https://github.com/apertureless/vue-chartjs/tree/v2.6.1) (2017-04-21)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0...v2.6.1)
|
||||||
|
|
||||||
**Closed issues:**
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Not understanding options [\#93](https://github.com/apertureless/vue-chartjs/issues/93)
|
||||||
|
- A Gotcha on component creation. [\#92](https://github.com/apertureless/vue-chartjs/issues/92)
|
||||||
|
- Error when building: 'This dependency was not found: chartjs' [\#91](https://github.com/apertureless/vue-chartjs/issues/91)
|
||||||
|
- Chart does not render inside conditional [\#90](https://github.com/apertureless/vue-chartjs/issues/90)
|
||||||
|
- Unable to add to material-vue layout [\#87](https://github.com/apertureless/vue-chartjs/issues/87)
|
||||||
|
|
||||||
|
## [v2.6.0](https://github.com/apertureless/vue-chartjs/tree/v2.6.0) (2017-04-09)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0-rc1...v2.6.0)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- how to export to image or pdf [\#89](https://github.com/apertureless/vue-chartjs/issues/89)
|
||||||
|
- 🙏🏻 Testing 2.6.0-rc1 [\#88](https://github.com/apertureless/vue-chartjs/issues/88)
|
||||||
|
- Adding annotation plugin functionality [\#86](https://github.com/apertureless/vue-chartjs/issues/86)
|
||||||
|
|
||||||
|
## [v2.6.0-rc1](https://github.com/apertureless/vue-chartjs/tree/v2.6.0-rc1) (2017-04-05)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.6...v2.6.0-rc1)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Overwrite prop [\#85](https://github.com/apertureless/vue-chartjs/issues/85)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- Update release build to not include externals. [\#84](https://github.com/apertureless/vue-chartjs/pull/84) ([gcoguiec](https://github.com/gcoguiec))
|
||||||
|
|
||||||
|
## [v2.5.6](https://github.com/apertureless/vue-chartjs/tree/v2.5.6) (2017-03-29)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...v2.5.6)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Can not render two lines at the same time [\#83](https://github.com/apertureless/vue-chartjs/issues/83)
|
||||||
|
- Suggestion: Chart not re-rendering on window resize [\#82](https://github.com/apertureless/vue-chartjs/issues/82)
|
||||||
|
- How can you change legend label colour? [\#81](https://github.com/apertureless/vue-chartjs/issues/81)
|
||||||
|
- Doughnut with text in the middle [\#80](https://github.com/apertureless/vue-chartjs/issues/80)
|
||||||
|
- Set chart width without affecting labels [\#79](https://github.com/apertureless/vue-chartjs/issues/79)
|
||||||
|
- Loading data from server and displaying [\#78](https://github.com/apertureless/vue-chartjs/issues/78)
|
||||||
|
- Why separate .js files in the examples? [\#77](https://github.com/apertureless/vue-chartjs/issues/77)
|
||||||
- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
|
- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
|
||||||
- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
|
- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
|
||||||
|
- Uncaught TypeError: Cannot read property 'chartId' of undefined [\#74](https://github.com/apertureless/vue-chartjs/issues/74)
|
||||||
|
- TypeError: child.\_updateFromParent is not a function [\#72](https://github.com/apertureless/vue-chartjs/issues/72)
|
||||||
|
- Styling componement's surrounding \<div\> [\#70](https://github.com/apertureless/vue-chartjs/issues/70)
|
||||||
|
|
||||||
## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
|
## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
|
||||||
|
|||||||
61
README.md
61
README.md
@@ -6,9 +6,10 @@
|
|||||||
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||||
[](https://travis-ci.org/apertureless/vue-chartjs)
|
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||||
[](http://packagequality.com/#?package=vue-chartjs)
|
[](http://packagequality.com/#?package=vue-chartjs)
|
||||||
[](https://www.npmjs.com/package/vue-chartjs)
|
[](https://www.npmjs.com/package/vue-chartjs)
|
||||||
[](https://gitter.im/vue-chartjs/Lobby)
|
[](https://gitter.im/vue-chartjs/Lobby)
|
||||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||||
|
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||||
|
|
||||||
# vue-chartjs
|
# vue-chartjs
|
||||||
|
|
||||||
@@ -16,8 +17,8 @@
|
|||||||
|
|
||||||
## Demo & Docs
|
## Demo & Docs
|
||||||
|
|
||||||
- [Demo](http://demo.vue-chartjs.org/)
|
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||||
- [Docs](http://www.vue-chartjs.org/)
|
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||||
|
|
||||||
### Compatibility
|
### Compatibility
|
||||||
|
|
||||||
@@ -32,7 +33,45 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
|
|||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
Simply run `npm install vue-chartjs`
|
Simply run `yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
|
Or if you want to use it directly in the browser add
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||||
|
```
|
||||||
|
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||||
|
|
||||||
|
## Explanation of Different Builds
|
||||||
|
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
|
||||||
|
|
||||||
|
- Browser
|
||||||
|
- Browserify / Webpack 1
|
||||||
|
- Webpack 2
|
||||||
|
|
||||||
|
|
||||||
|
| Build | Chart.js | Vue.js |
|
||||||
|
|---|---|---|
|
||||||
|
| vue-chartjs.full.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.full.min.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.js | peerDependency | peerDependency |
|
||||||
|
| vue-chartjs.min.js | peerDependency | peerDependency |
|
||||||
|
| es/index* | peerDependency | peerDependency |
|
||||||
|
|
||||||
|
### Browser
|
||||||
|
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||||
|
|
||||||
|
|
||||||
|
### Browserify / Webpack 1
|
||||||
|
|
||||||
|
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
||||||
|
|
||||||
|
However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||||
|
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||||
|
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
@@ -178,20 +217,6 @@ export default Line.extend({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## Webpack, Browserify and dist files.
|
|
||||||
|
|
||||||
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
|
|
||||||
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
|
|
||||||
And you end up with two vue instances.
|
|
||||||
|
|
||||||
If you're using webpack 2 however, it will automatically import the transpiled ES sources.
|
|
||||||
If you know what you're doing you can import directly from the transpiled es sources:
|
|
||||||
|
|
||||||
```
|
|
||||||
import { Line } from 'vue-chartjs/es'
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|
||||||
### Bar Chart
|
### Bar Chart
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
search: english
|
search: en
|
||||||
---
|
---
|
||||||
|
|
||||||
# vue-chartjs
|
# vue-chartjs
|
||||||
@@ -287,25 +287,33 @@ Sometimes you need more control over chart.js. Thats why you can access the char
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Webpack, Browserify and dist files.
|
|
||||||
|
|
||||||
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
|
## Explanation of Different Builds
|
||||||
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
|
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
|
||||||
And you end up with two vue instances.
|
|
||||||
|
|
||||||
If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
|
- Browser
|
||||||
If you know what you're doing you can import directly from the transpiled es sources:
|
- Browserify / Webpack 1
|
||||||
|
- Webpack 2
|
||||||
|
|
||||||
```
|
|
||||||
import { Line } from 'vue-chartjs/es'
|
|
||||||
```
|
|
||||||
|
|
||||||
### Browserify
|
| Build | Chart.js | Vue.js |
|
||||||
|
|---|---|---|
|
||||||
|
| vue-chartjs.full.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.full.min.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.js | peerDependency | peerDependency |
|
||||||
|
| vue-chartjs.min.js | peerDependency | peerDependency |
|
||||||
|
| es/index* | peerDependency | peerDependency |
|
||||||
|
|
||||||
In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
|
### Browser
|
||||||
|
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||||
|
|
||||||
```
|
|
||||||
{
|
### Browserify / Webpack 1
|
||||||
"presets": ["es2015"]
|
|
||||||
}
|
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
||||||
```
|
|
||||||
|
However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||||
|
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
const langs = [
|
const langs = [
|
||||||
{title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
|
{title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
|
||||||
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/}
|
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
|
||||||
|
{title: '日本語', path: '/ja/', matchPath: /^\/ja/}
|
||||||
]
|
]
|
||||||
|
|
||||||
docute.init({
|
docute.init({
|
||||||
@@ -30,6 +31,15 @@ docute.init({
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
evanyou()
|
evanyou(),
|
||||||
|
docsearch({
|
||||||
|
apiKey: 'b3544f7387612693644777553675d56a',
|
||||||
|
indexName: 'vue-chartjs',
|
||||||
|
// algolia docsearch allows you to search with tag filter
|
||||||
|
tags: ['en', 'de'],
|
||||||
|
// this plugin does require a url too
|
||||||
|
// where docsearch fetches contents
|
||||||
|
url: 'https://vue-chartjs.org'
|
||||||
|
})
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
search: deutsch
|
search: de
|
||||||
---
|
---
|
||||||
|
|
||||||
# vue-chartjs
|
# vue-chartjs
|
||||||
@@ -134,7 +134,7 @@ export default Bar.extend({
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script src="https://unpkg.com/docute-evanyou"></script>
|
<script src="https://unpkg.com/docute-evanyou"></script>
|
||||||
<script src="https://unpkg.com/docute/dist/docute.js"></script>
|
<script src="https://unpkg.com/docute/dist/docute.js"></script>
|
||||||
|
<script src="https://unpkg.com/docute/plugins/docsearch.js"></script>
|
||||||
<script src="./config.js"></script>
|
<script src="./config.js"></script>
|
||||||
<!-- don't remove this part end -->
|
<!-- don't remove this part end -->
|
||||||
|
|
||||||
|
|||||||
318
docs/ja/README.md
Normal file
318
docs/ja/README.md
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
---
|
||||||
|
search: ja
|
||||||
|
---
|
||||||
|
|
||||||
|
# vue-chartjs
|
||||||
|
**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
|
||||||
|
|
||||||
|
## イントロ
|
||||||
|
`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
|
||||||
|
|
||||||
|
chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
|
||||||
|
|
||||||
|
## インストール
|
||||||
|
Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
|
||||||
|
|
||||||
|
`yarn add vue-chartjs`
|
||||||
|
|
||||||
|
Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
|
||||||
|
|
||||||
|
`yarn add vue-chartjs@legacy`
|
||||||
|
|
||||||
|
## クイックスタート
|
||||||
|
|
||||||
|
BaseChartをインポートしてextendします。
|
||||||
|
|
||||||
|
異なるデータのチャートを表示するときに柔軟性が大幅に向上します。
|
||||||
|
コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。
|
||||||
|
|
||||||
|
パッケージ全体またはモジュールごとに個別にインポートすることができます。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CommitChart.js
|
||||||
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Bar.extend({
|
||||||
|
mounted () {
|
||||||
|
// Overwriting base render method with actual data.
|
||||||
|
this.renderChart(data, options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
renderChart()メソッドに2つの引数を渡すことができます:
|
||||||
|
|
||||||
|
- Data object
|
||||||
|
- Options object
|
||||||
|
|
||||||
|
### データオブジェクト
|
||||||
|
|
||||||
|
データオブジェクトは、次のようになります。:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
labels: ['January', 'February'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'GitHub Commits',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [40, 20]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
|
||||||
|
## プロパティ
|
||||||
|
|
||||||
|
BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
|
||||||
|
|
||||||
|
| プロパティ | 説明 |
|
||||||
|
|---|---|
|
||||||
|
| width | chartの表示幅 |
|
||||||
|
| height | chartの表示高さ |
|
||||||
|
| chart-id | canvas要素のid |
|
||||||
|
|
||||||
|
|
||||||
|
## 実装例
|
||||||
|
|
||||||
|
いくつか例を記載します。
|
||||||
|
|
||||||
|
### プロパティの利用
|
||||||
|
|
||||||
|
dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// LineChart.js
|
||||||
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
props: ['data', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.data, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
コンポーネントに追加して、使用することができます。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
|
||||||
|
```
|
||||||
|
|
||||||
|
幅と高さを上書きする場合:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<line-chart
|
||||||
|
:data="{your data object}"
|
||||||
|
:options="{responsive: false, maintainAspectRatio: false}"
|
||||||
|
:width="400"
|
||||||
|
:height="200"
|
||||||
|
>
|
||||||
|
</line-chart>
|
||||||
|
```
|
||||||
|
|
||||||
|
<p class="warning">
|
||||||
|
`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
### コンポーネント内のローカルデータを使用する場合
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import {Bar} from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Bar.extend({
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
datacollection: {
|
||||||
|
labels: ['January', 'February'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Data One',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [40, 20]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### コンポーネントの再利用
|
||||||
|
|
||||||
|
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
|
||||||
|
|
||||||
|
|
||||||
|
## リアクティブデータ
|
||||||
|
|
||||||
|
Chart.js はデータセットを変更したときのライブアップデートを提供していません。`vue-chartjs` ではこれを実現するために2つのミックスインを提供します。
|
||||||
|
|
||||||
|
- `reactiveProp`
|
||||||
|
- `reactiveData`
|
||||||
|
|
||||||
|
この2つのミックスインは実際には同じものです。 ほとんどの場合 `reactiveProp` を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に `chartData` という名前のプロパティを追加し、さらにこのプロパティに対して `vue watch` を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには `update()` を呼び出し、新しいデータセットが追加された場合は `renderChart()` が呼び出されます。
|
||||||
|
|
||||||
|
`reactiveData` は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。
|
||||||
|
単一の目的のチャートのみ必要でチャートコンポーネント内でAPI呼び出しを行うときのみ有用です。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chartData: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 例
|
||||||
|
|
||||||
|
**LineChart.js**
|
||||||
|
```javascript
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
const { reactiveProp } = mixins
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [reactiveProp],
|
||||||
|
props: ['options'],
|
||||||
|
mounted () {
|
||||||
|
// this.chartData is created in the mixin
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**RandomChart.vue**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<template>
|
||||||
|
<div class="small">
|
||||||
|
<line-chart :chart-data="datacollection"></line-chart>
|
||||||
|
<button @click="fillData()">Randomize</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LineChart from './LineChart.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
LineChart
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
datacollection: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.fillData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fillData () {
|
||||||
|
this.datacollection = {
|
||||||
|
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Data One',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [this.getRandomInt(), this.getRandomInt()]
|
||||||
|
}, {
|
||||||
|
label: 'Data One',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [this.getRandomInt(), this.getRandomInt()]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getRandomInt () {
|
||||||
|
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.small {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 150px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
<p class="warning">
|
||||||
|
⚠ 注意:親コンポーネントでデータを変更し、それを子チャートコンポーネントに渡す場合は、JavaScriptの制限事項に注意してください。
|
||||||
|
この問題の詳細 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||||
|
</p>
|
||||||
|
|
||||||
|
### 制限事項
|
||||||
|
<ul>
|
||||||
|
<li>[注意事項](https://jp.vuejs.org/v2/guide/list.html#注意事項)</li>
|
||||||
|
<li>[変更検出の注意事項](https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項)</li>
|
||||||
|
<li>[vm.$watch](https://jp.vuejs.org/v2/api/#vm-watch)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## Chart.js オブジェクト
|
||||||
|
|
||||||
|
場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
|
||||||
|
|
||||||
|
## 利用可能なグラフ
|
||||||
|
|
||||||
|
### 棒グラフ
|
||||||
|
<p class="tip">
|
||||||
|
棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
|
||||||
|
</p>
|
||||||
|
|
||||||
|

|
||||||
|
### 折れ線グラフ
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### ドーナツチャート
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### パイチャート
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### レーダーチャート
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 鶏頭図
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### バブルチャート
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
|
||||||
|
## ビルド方法の違い
|
||||||
|
あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
|
||||||
|
|
||||||
|
- Browser
|
||||||
|
- Browserify / Webpack 1
|
||||||
|
- Webpack 2
|
||||||
|
|
||||||
|
|
||||||
|
| Build | Chart.js | Vue.js |
|
||||||
|
|---|---|---|
|
||||||
|
| vue-chartjs.full.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.full.min.js | Bundled | Bundled |
|
||||||
|
| vue-chartjs.js | peerDependency | peerDependency |
|
||||||
|
| vue-chartjs.min.js | peerDependency | peerDependency |
|
||||||
|
| es/index* | peerDependency | peerDependency |
|
||||||
|
|
||||||
|
### ブラウザー
|
||||||
|
`vue-chartjs` をビルドツールを使用せず直接ブラウザー内で使用します。 例 [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) このケースでは縮小版の `vue-chartjs.full.min.js` を使用します。これにはVue.js と Chart.js が 含まれていて、UMD Module として定義されています。従ってあなたはただ一つのファイルしか必要としません。
|
||||||
|
|
||||||
|
### Browserify / Webpack 1
|
||||||
|
Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合は、__トランスパイル__ され UMD Moduleとして __バンドル__ された `vue-chartjs.js` を使用します。
|
||||||
|
|
||||||
|
Vue.jsとChart.jsは `peerDependencies` なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
|
||||||
36
package.json
36
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "2.6.0-rc1",
|
"version": "2.6.3",
|
||||||
"description": "vue.js wrapper for chart.js",
|
"description": "vue.js wrapper for chart.js",
|
||||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||||
"homepage": "http://vue-chartjs.org",
|
"homepage": "http://vue-chartjs.org",
|
||||||
@@ -61,15 +61,15 @@
|
|||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "^2.5.0",
|
"chart.js": "^2.5.0",
|
||||||
"vue": "^2.2.6"
|
"vue": "^2.3.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.24.0",
|
"babel-cli": "^6.24.1",
|
||||||
"babel-core": "^6.24.0",
|
"babel-core": "^6.24.1",
|
||||||
"babel-loader": "^6.4.1",
|
"babel-loader": "^7.0.0",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"babel-preset-es2015": "^6.24.0",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-stage-2": "^6.22.0",
|
"babel-preset-stage-2": "^6.24.1",
|
||||||
"babel-runtime": "^6.23.0",
|
"babel-runtime": "^6.23.0",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"chart.js": "^2.5.0",
|
"chart.js": "^2.5.0",
|
||||||
@@ -77,14 +77,16 @@
|
|||||||
"connect-history-api-fallback": "^1.1.0",
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
"cross-env": "^3.2.4",
|
"cross-env": "^3.2.4",
|
||||||
"cross-spawn": "^5.1.0",
|
"cross-spawn": "^5.1.0",
|
||||||
"css-loader": "^0.27.3",
|
"css-loader": "^0.28.0",
|
||||||
"eslint": "^3.18.0",
|
"eslint": "^3.19.0",
|
||||||
"eslint-config-standard": "^7.1.0",
|
"eslint-config-standard": "^10.2.1",
|
||||||
"eslint-friendly-formatter": "^2.0.7",
|
"eslint-friendly-formatter": "^2.0.7",
|
||||||
"eslint-loader": "^1.7.0",
|
"eslint-loader": "^1.7.1",
|
||||||
"eslint-plugin-html": "^2.0.1",
|
"eslint-plugin-html": "^2.0.1",
|
||||||
|
"eslint-plugin-import": "^2.2.0",
|
||||||
|
"eslint-plugin-node": "^4.2.2",
|
||||||
"eslint-plugin-promise": "^3.5.0",
|
"eslint-plugin-promise": "^3.5.0",
|
||||||
"eslint-plugin-standard": "^2.1.1",
|
"eslint-plugin-standard": "^3.0.1",
|
||||||
"eventsource-polyfill": "^0.9.6",
|
"eventsource-polyfill": "^0.9.6",
|
||||||
"express": "^4.15.2",
|
"express": "^4.15.2",
|
||||||
"extract-text-webpack-plugin": "^1.0.1",
|
"extract-text-webpack-plugin": "^1.0.1",
|
||||||
@@ -115,12 +117,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.2.6",
|
"vue": "^2.3.3",
|
||||||
"vue-hot-reload-api": "^2.0.11",
|
"vue-hot-reload-api": "^2.1.0",
|
||||||
"vue-html-loader": "^1.2.4",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-loader": "^11.3.4",
|
"vue-loader": "^12.0.4",
|
||||||
"vue-style-loader": "^2.0.5",
|
"vue-style-loader": "^3.0.1",
|
||||||
"vue-template-compiler": "^2.2.6",
|
"vue-template-compiler": "^2.3.3",
|
||||||
"webpack": "^1.13.2",
|
"webpack": "^1.13.2",
|
||||||
"webpack-dev-middleware": "^1.10.1",
|
"webpack-dev-middleware": "^1.10.1",
|
||||||
"webpack-hot-middleware": "^2.17.1",
|
"webpack-hot-middleware": "^2.17.1",
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options, type) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
|
|||||||
Reference in New Issue
Block a user