mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
69 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0fbdcc10b0 | ||
|
|
ab31dfe727 | ||
|
|
85fafd9b58 | ||
|
54d85da955 | ||
|
|
60f87e72ae | ||
|
|
896b7ddfa3 | ||
|
|
6d19370687 | ||
|
|
c9bc36ee59 | ||
|
|
7e52380bd4 | ||
|
|
32229fbfdd | ||
|
|
e0c771f3d3 | ||
|
57cff76747 | ||
|
|
79c138d65a | ||
|
|
64c6cedd74 | ||
|
|
188ab83989 | ||
|
|
d9f53e6ef4 | ||
|
|
7d1dacf77c | ||
|
|
67c01133d0 | ||
|
ab9721b577 | ||
|
|
71bcafa804 | ||
|
882bdd86b8 | ||
|
|
4f7dda3c3b | ||
|
|
f04441ab36 | ||
|
|
acb3d5c823 | ||
|
|
92bac84dae | ||
|
|
85e946dbe1 | ||
|
|
640ce5c932 | ||
|
|
ef77c0d831 | ||
|
|
a996049a6b | ||
|
|
4109fb30f3 | ||
|
|
b23ce23015 | ||
|
|
7f62914edb | ||
|
|
677c53d9fe | ||
|
3e423fd7ae | ||
|
|
362639c4e2 | ||
|
ef127686cd | ||
|
|
0a483946bc | ||
|
|
ba5cedc981 | ||
|
|
9b8e961d1c | ||
|
|
d304a2c5ab | ||
|
|
80799b7bd5 | ||
|
|
9d44758976 | ||
|
|
e8cbef7fa7 | ||
|
|
a2b023d226 | ||
|
|
7a048a07df | ||
|
|
10535095be | ||
|
|
0b12e0f8b7 | ||
|
43bada7b15 | ||
|
|
6736715895 | ||
|
5d159e7841 | ||
|
|
c22bd65a8e | ||
|
|
030ba0c035 | ||
|
|
ab3321001b | ||
|
|
0f6e04cd5e | ||
|
|
cc869c979d | ||
|
|
8b6afd1e70 | ||
|
|
43363fc2ae | ||
|
|
29d1ca3428 | ||
|
2e737e9394 | ||
|
|
5da4b6165e | ||
|
|
1f522e7fd2 | ||
|
|
8324f2c578 | ||
|
|
ac09ae744e | ||
|
39d0b4b95c | ||
|
dbce4d7c2c | ||
|
|
d49b06f92a | ||
|
|
5cc8f0a878 | ||
|
|
b762d400d2 | ||
|
|
ceb5988e1c |
104
CHANGELOG.md
104
CHANGELOG.md
@@ -1,5 +1,107 @@
|
|||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
|
## [v2.7.2](https://github.com/apertureless/vue-chartjs/tree/v2.7.2) (2017-07-22)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.1...v2.7.2)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Accessibility - Add unique titles to frames [\#150](https://github.com/apertureless/vue-chartjs/issues/150)
|
||||||
|
- update\(\) not refreshing chart [\#148](https://github.com/apertureless/vue-chartjs/issues/148)
|
||||||
|
- Custome label y axis [\#147](https://github.com/apertureless/vue-chartjs/issues/147)
|
||||||
|
- Access specific points on the canvas and labels for styling [\#146](https://github.com/apertureless/vue-chartjs/issues/146)
|
||||||
|
- legendCallback\(\) doesn't render a custom legend [\#144](https://github.com/apertureless/vue-chartjs/issues/144)
|
||||||
|
- where can i get the demo sources code? thanks [\#143](https://github.com/apertureless/vue-chartjs/issues/143)
|
||||||
|
- Props not works as expected, updating of value doesn't work [\#138](https://github.com/apertureless/vue-chartjs/issues/138)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- ⬆️ Update dependency vue to 2.4.2 [\#154](https://github.com/apertureless/vue-chartjs/pull/154) ([apertureless](https://github.com/apertureless))
|
||||||
|
- Remove useless labels [\#153](https://github.com/apertureless/vue-chartjs/pull/153) ([clarkdo](https://github.com/clarkdo))
|
||||||
|
- :pencil2: Remove generateLegend\(\) from initialization codes [\#145](https://github.com/apertureless/vue-chartjs/pull/145) ([k-rumi](https://github.com/k-rumi))
|
||||||
|
|
||||||
|
## [v2.7.1](https://github.com/apertureless/vue-chartjs/tree/v2.7.1) (2017-07-05)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.7.0...v2.7.1)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Default backgroundColor needed [\#142](https://github.com/apertureless/vue-chartjs/issues/142)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- Fix links to images in translated documents [\#141](https://github.com/apertureless/vue-chartjs/pull/141) ([k-rumi](https://github.com/k-rumi))
|
||||||
|
|
||||||
|
## [v2.7.0](https://github.com/apertureless/vue-chartjs/tree/v2.7.0) (2017-07-04)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.5...v2.7.0)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Reactive Data Tutorial [\#132](https://github.com/apertureless/vue-chartjs/issues/132)
|
||||||
|
- Using inline plugins [\#130](https://github.com/apertureless/vue-chartjs/issues/130)
|
||||||
|
- Scatter Chart [\#129](https://github.com/apertureless/vue-chartjs/issues/129)
|
||||||
|
- Generating Chart after clicking submit button [\#128](https://github.com/apertureless/vue-chartjs/issues/128)
|
||||||
|
- Ticks not working with reactive props [\#127](https://github.com/apertureless/vue-chartjs/issues/127)
|
||||||
|
- Error in callback for watcher "chartData": "TypeError: Cannot read property 'data' of undefined" [\#126](https://github.com/apertureless/vue-chartjs/issues/126)
|
||||||
|
- Passing the data from vue to chartjs [\#125](https://github.com/apertureless/vue-chartjs/issues/125)
|
||||||
|
- Combination of Bar and Line Chart [\#123](https://github.com/apertureless/vue-chartjs/issues/123)
|
||||||
|
- Reactive data example not working [\#122](https://github.com/apertureless/vue-chartjs/issues/122)
|
||||||
|
- vue-chartjs height was 0 when i set v-show [\#120](https://github.com/apertureless/vue-chartjs/issues/120)
|
||||||
|
- Bar chart, barPercentage in X axis [\#119](https://github.com/apertureless/vue-chartjs/issues/119)
|
||||||
|
- update event not firing on data change [\#118](https://github.com/apertureless/vue-chartjs/issues/118)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- ✅ Update tests for addPlugin method [\#140](https://github.com/apertureless/vue-chartjs/pull/140) ([apertureless](https://github.com/apertureless))
|
||||||
|
- Fix beforeDestory when renderChart was not called [\#139](https://github.com/apertureless/vue-chartjs/pull/139) ([ZhangYiJiang](https://github.com/ZhangYiJiang))
|
||||||
|
- Add support for inline plugins [\#137](https://github.com/apertureless/vue-chartjs/pull/137) ([kurbar](https://github.com/kurbar))
|
||||||
|
- Feature/scatter chart [\#136](https://github.com/apertureless/vue-chartjs/pull/136) ([apertureless](https://github.com/apertureless))
|
||||||
|
- 🐛 Fix \#122 reactive mixin [\#135](https://github.com/apertureless/vue-chartjs/pull/135) ([apertureless](https://github.com/apertureless))
|
||||||
|
- 📝 Add resources & tutorials to docs [\#133](https://github.com/apertureless/vue-chartjs/pull/133) ([apertureless](https://github.com/apertureless))
|
||||||
|
- fix a typo in an example [\#131](https://github.com/apertureless/vue-chartjs/pull/131) ([JobV](https://github.com/JobV))
|
||||||
|
- Update README [\#121](https://github.com/apertureless/vue-chartjs/pull/121) ([stoykostanchev](https://github.com/stoykostanchev))
|
||||||
|
|
||||||
|
## [v2.6.5](https://github.com/apertureless/vue-chartjs/tree/v2.6.5) (2017-06-10)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.4...v2.6.5)
|
||||||
|
|
||||||
|
## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Transition leave-active-class not working [\#117](https://github.com/apertureless/vue-chartjs/issues/117)
|
||||||
|
- chartOptions reactivity [\#116](https://github.com/apertureless/vue-chartjs/issues/116)
|
||||||
|
- Cannot switch off legend [\#114](https://github.com/apertureless/vue-chartjs/issues/114)
|
||||||
|
- run error on my mac pro [\#113](https://github.com/apertureless/vue-chartjs/issues/113)
|
||||||
|
- Update install instructions in docs [\#112](https://github.com/apertureless/vue-chartjs/issues/112)
|
||||||
|
- Typo in docs [\#111](https://github.com/apertureless/vue-chartjs/issues/111)
|
||||||
|
- Charts are given a fixed width, even when they are set to be responsive [\#108](https://github.com/apertureless/vue-chartjs/issues/108)
|
||||||
|
- Use Reactive Data with \<script\> version of vue-chartjs [\#107](https://github.com/apertureless/vue-chartjs/issues/107)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- Fix typo in docs [\#115](https://github.com/apertureless/vue-chartjs/pull/115) ([euledge](https://github.com/euledge))
|
||||||
|
- :memo: Add pt-br readme support [\#110](https://github.com/apertureless/vue-chartjs/pull/110) ([kimuraz](https://github.com/kimuraz))
|
||||||
|
- Fix reactive mixins animation re-rendering issue. [\#109](https://github.com/apertureless/vue-chartjs/pull/109) ([MuseofMoose](https://github.com/MuseofMoose))
|
||||||
|
|
||||||
|
## [v2.6.3](https://github.com/apertureless/vue-chartjs/tree/v2.6.3) (2017-05-14)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.2...v2.6.3)
|
||||||
|
|
||||||
|
**Closed issues:**
|
||||||
|
|
||||||
|
- Reactivity of Options [\#106](https://github.com/apertureless/vue-chartjs/issues/106)
|
||||||
|
- Do not use built-in or reserved HTML elements as component id: MenuItem [\#104](https://github.com/apertureless/vue-chartjs/issues/104)
|
||||||
|
- Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
|
||||||
|
- How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
|
||||||
|
- It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
|
||||||
|
- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
|
||||||
|
- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
|
||||||
|
- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
|
||||||
|
|
||||||
|
**Merged pull requests:**
|
||||||
|
|
||||||
|
- Update README.md [\#105](https://github.com/apertureless/vue-chartjs/pull/105) ([guilherfp](https://github.com/guilherfp))
|
||||||
|
- translated README.md into Japanese [\#102](https://github.com/apertureless/vue-chartjs/pull/102) ([euledge](https://github.com/euledge))
|
||||||
|
- add CDNJS version badge in README.md [\#100](https://github.com/apertureless/vue-chartjs/pull/100) ([extend1994](https://github.com/extend1994))
|
||||||
|
|
||||||
## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
|
## [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.6.1...v2.6.2)
|
||||||
|
|
||||||
@@ -80,7 +182,7 @@
|
|||||||
|
|
||||||
**Merged pull requests:**
|
**Merged pull requests:**
|
||||||
|
|
||||||
- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/integration/greenkeeper))
|
- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/apps/greenkeeper))
|
||||||
|
|
||||||
## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
|
## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)
|
||||||
|
|||||||
24
README.md
24
README.md
@@ -27,9 +27,9 @@
|
|||||||
- v2 later
|
- v2 later
|
||||||
- Vue.js 2.x
|
- Vue.js 2.x
|
||||||
|
|
||||||
After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
|
After the final release of vue.js 2, you also get the v2 by default if you install vue-chartjs over npm.
|
||||||
No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
|
No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
|
||||||
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.x)
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,7 +38,7 @@ Simply run `yarn add vue-chartjs chart.js`
|
|||||||
Or if you want to use it directly in the browser add
|
Or if you want to use it directly in the browser add
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
|
||||||
```
|
```
|
||||||
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||||
|
|
||||||
@@ -122,7 +122,7 @@ You can overwrite the default chart options. Just pass the options object as a s
|
|||||||
import { Line } from 'vue-chartjs'
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
export default Line.extend({
|
export default Line.extend({
|
||||||
props: ["data", "options"],
|
props: ['data', 'options'],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.data, this.options)
|
this.renderChart(this.data, this.options)
|
||||||
}
|
}
|
||||||
@@ -149,7 +149,7 @@ export default {
|
|||||||
## Reactivity
|
## Reactivity
|
||||||
|
|
||||||
Chart.js does not update or re-render the chart if new data is passed.
|
Chart.js does not update or re-render the chart if new data is passed.
|
||||||
However you can simply implement this by your own or use one of the two mixins which are included.
|
However you can simply implement this on your own or use one of the two mixins which are included.
|
||||||
|
|
||||||
- `reactiveProp`
|
- `reactiveProp`
|
||||||
- `reactiveData`
|
- `reactiveData`
|
||||||
@@ -165,7 +165,7 @@ import { Line, mixins } from 'vue-chartjs'
|
|||||||
|
|
||||||
export default Line.extend({
|
export default Line.extend({
|
||||||
mixins: [mixins.reactiveProp],
|
mixins: [mixins.reactiveProp],
|
||||||
props: ["chartData", "options"],
|
props: ['chartData', 'options'],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
@@ -183,7 +183,7 @@ import VueCharts from 'vue-chartjs'
|
|||||||
|
|
||||||
export default VueCharts.Line.extend({
|
export default VueCharts.Line.extend({
|
||||||
mixins: [VueCharts.mixins.reactiveProp],
|
mixins: [VueCharts.mixins.reactiveProp],
|
||||||
props: ["chartData", "options"],
|
props: ['chartData', 'options'],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
@@ -196,7 +196,7 @@ import { Line, mixins } from 'vue-chartjs'
|
|||||||
|
|
||||||
export default Line.extend({
|
export default Line.extend({
|
||||||
mixins: [mixins.reactiveProp],
|
mixins: [mixins.reactiveProp],
|
||||||
props: ["chartData", "options"],
|
props: ['chartData', 'options'],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
@@ -210,7 +210,7 @@ const { reactiveProp } = mixins
|
|||||||
|
|
||||||
export default Line.extend({
|
export default Line.extend({
|
||||||
mixins: [reactiveProp],
|
mixins: [reactiveProp],
|
||||||
props: ["chartData", "options"],
|
props: ['chartData', 'options'],
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
@@ -247,6 +247,10 @@ export default Line.extend({
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Scatter
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Build Setup
|
## Build Setup
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
@@ -269,7 +273,7 @@ npm run e2e
|
|||||||
npm test
|
npm test
|
||||||
```
|
```
|
||||||
|
|
||||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
|||||||
BIN
assets/bar.png
Normal file → Executable file
BIN
assets/bar.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 25 KiB |
BIN
assets/bubble.png
Normal file → Executable file
BIN
assets/bubble.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 26 KiB |
BIN
assets/doughnut.png
Normal file → Executable file
BIN
assets/doughnut.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 41 KiB |
BIN
assets/line.png
Normal file → Executable file
BIN
assets/line.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 31 KiB |
BIN
assets/pie.png
Normal file → Executable file
BIN
assets/pie.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 76 KiB |
BIN
assets/polar.png
Normal file → Executable file
BIN
assets/polar.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 87 KiB |
BIN
assets/radar.png
Normal file → Executable file
BIN
assets/radar.png
Normal file → Executable file
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 75 KiB |
BIN
assets/scatter.png
Executable file
BIN
assets/scatter.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
|
|||||||
## Installation
|
## Installation
|
||||||
If you are working with Vue.js 2+ simple run:
|
If you are working with Vue.js 2+ simple run:
|
||||||
|
|
||||||
`yarn add vue-chartjs`
|
`yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
||||||
|
|
||||||
@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
|
|||||||
| width | chart width |
|
| width | chart width |
|
||||||
| height | chart height |
|
| height | chart height |
|
||||||
| chart-id | id of the canvas |
|
| chart-id | id of the canvas |
|
||||||
|
| css-classes | String with css classes for the surrounding div |
|
||||||
|
| styles | Object with css styles for the surrounding div container |
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
@@ -112,7 +113,7 @@ If you want to overwrite the width and height:
|
|||||||
```
|
```
|
||||||
|
|
||||||
<p class="warning">
|
<p class="warning">
|
||||||
Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
|
Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height`.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
### Chart with local data
|
### Chart with local data
|
||||||
@@ -134,7 +135,7 @@ export default Bar.extend({
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||||
}
|
}
|
||||||
@@ -176,7 +177,8 @@ export default Line.extend({
|
|||||||
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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -255,6 +257,26 @@ export default Line.extend({
|
|||||||
|
|
||||||
Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
|
Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
|
||||||
|
|
||||||
|
## Inline plugins
|
||||||
|
|
||||||
|
In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
|
||||||
|
|
||||||
|
If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
|
||||||
|
You should call `addPlugin()` before the `renderChart()` method.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
mounted () {
|
||||||
|
this.addPlugin({
|
||||||
|
id: 'my-plugin',
|
||||||
|
beforeInit: function (chart) {
|
||||||
|
....
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|
||||||
### Bar Chart
|
### Bar Chart
|
||||||
@@ -287,6 +309,12 @@ Sometimes you need more control over chart.js. Thats why you can access the char
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Scatter
|
||||||
|
|
||||||
|
This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Explanation of Different Builds
|
## 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.
|
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
|
||||||
@@ -312,8 +340,18 @@ You can use `vue-chartjs` directly in the browser without any build setup. Like
|
|||||||
|
|
||||||
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
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.
|
However Vue.js and Chart.js are `peerDependencies` 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
|
### Webpack 2
|
||||||
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
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.
|
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.
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
You can find here some Resources like tutorials on how to use `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/)
|
||||||
|
|||||||
BIN
docs/assets/scatter.png
Normal file
BIN
docs/assets/scatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -1,7 +1,10 @@
|
|||||||
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/}
|
{title: '日本語', path: '/ja/', matchPath: /^\/ja/},
|
||||||
|
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
|
||||||
|
{title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
|
||||||
|
{title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
|
||||||
]
|
]
|
||||||
|
|
||||||
docute.init({
|
docute.init({
|
||||||
@@ -36,7 +39,7 @@ docute.init({
|
|||||||
apiKey: 'b3544f7387612693644777553675d56a',
|
apiKey: 'b3544f7387612693644777553675d56a',
|
||||||
indexName: 'vue-chartjs',
|
indexName: 'vue-chartjs',
|
||||||
// algolia docsearch allows you to search with tag filter
|
// algolia docsearch allows you to search with tag filter
|
||||||
tags: ['en', 'de'],
|
tags: ['en', 'de', 'ja', 'pt-br', 'ru'],
|
||||||
// this plugin does require a url too
|
// this plugin does require a url too
|
||||||
// where docsearch fetches contents
|
// where docsearch fetches contents
|
||||||
url: 'https://vue-chartjs.org'
|
url: 'https://vue-chartjs.org'
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
|
|||||||
## Installation
|
## Installation
|
||||||
If you are working with Vue.js 2+ simple run:
|
If you are working with Vue.js 2+ simple run:
|
||||||
|
|
||||||
`yarn add vue-chartjs`
|
`yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
||||||
|
|
||||||
@@ -262,30 +262,30 @@ Sometimes you need more control over chart.js. Thats why you can access the char
|
|||||||
There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
|
There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
### Line Chart
|
### Line Chart
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Doughnut
|
### Doughnut
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Pie
|
### Pie
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Radar
|
### Radar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Polar Area
|
### Polar Area
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Bubble
|
### Bubble
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Webpack, Browserify and dist files.
|
## Webpack, Browserify and dist files.
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ chart.jsの基本ロジックを抽象化していますが、公開されたcha
|
|||||||
## インストール
|
## インストール
|
||||||
Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
|
Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
|
||||||
|
|
||||||
`yarn add vue-chartjs`
|
`yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
|
Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
|
||||||
|
|
||||||
@@ -264,30 +264,30 @@ export default Line.extend({
|
|||||||
棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
|
棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
### 折れ線グラフ
|
### 折れ線グラフ
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### ドーナツチャート
|
### ドーナツチャート
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### パイチャート
|
### パイチャート
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### レーダーチャート
|
### レーダーチャート
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 鶏頭図
|
### 鶏頭図
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### バブルチャート
|
### バブルチャート
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## ビルド方法の違い
|
## ビルド方法の違い
|
||||||
|
|||||||
284
docs/pt-br/README.md
Normal file
284
docs/pt-br/README.md
Normal file
@@ -0,0 +1,284 @@
|
|||||||
|
<div align="center">
|
||||||
|
<img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[](https://badge.fury.io/js/vue-chartjs)
|
||||||
|
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||||
|
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||||
|
[](http://packagequality.com/#?package=vue-chartjs)
|
||||||
|
[](https://www.npmjs.com/package/vue-chartjs)
|
||||||
|
[](https://gitter.im/vue-chartjs/Lobby)
|
||||||
|
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||||
|
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||||
|
|
||||||
|
# vue-chartjs
|
||||||
|
|
||||||
|
**vue-chartjs** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente.
|
||||||
|
|
||||||
|
## Demo & Docs
|
||||||
|
|
||||||
|
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||||
|
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||||
|
|
||||||
|
### Compatibilidade
|
||||||
|
|
||||||
|
- v1 later `@legacy`
|
||||||
|
- Vue.js 1.x
|
||||||
|
- v2 later
|
||||||
|
- Vue.js 2.x
|
||||||
|
|
||||||
|
Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm.
|
||||||
|
Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada.
|
||||||
|
Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
||||||
|
|
||||||
|
## Instalação
|
||||||
|
|
||||||
|
Simplemente execute `yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
|
Ou se quiser utilizar diretamente no browser, adicione
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||||
|
```
|
||||||
|
em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||||
|
|
||||||
|
## Explicação das diferentes builds
|
||||||
|
|
||||||
|
Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como 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
|
||||||
|
Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo.
|
||||||
|
|
||||||
|
|
||||||
|
### Browserify / Webpack 1
|
||||||
|
|
||||||
|
Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD.
|
||||||
|
|
||||||
|
Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote.
|
||||||
|
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados.
|
||||||
|
|
||||||
|
## Como usar
|
||||||
|
|
||||||
|
Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource.
|
||||||
|
|
||||||
|
Você pode importar todo o pacote ou cada módulo individualmente.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import VueCharts from 'vue-chartjs'
|
||||||
|
import { Bar, Line } from 'vue-chartjs'
|
||||||
|
```
|
||||||
|
|
||||||
|
Apenas crie seu próprio componente.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CommitChart.js
|
||||||
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Bar.extend({
|
||||||
|
mounted () {
|
||||||
|
// Overwriting base render method with actual data.
|
||||||
|
this.renderChart({
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'GitHub Commits',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import CommitChart from 'path/to/component/CommitChart'
|
||||||
|
```
|
||||||
|
|
||||||
|
## Another Example with options
|
||||||
|
|
||||||
|
Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// MonthlyIncome.js
|
||||||
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
props: ["data", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.data, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Use isso no seu componente vue
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import MonthlyIncome from 'path/to/component/MonthlyIncome'
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<monthly-income :data={....} />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: { MonthlyIncome },
|
||||||
|
....
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reactivity (Reatividade)
|
||||||
|
|
||||||
|
O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados.
|
||||||
|
Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos.
|
||||||
|
|
||||||
|
- `reactiveProp`
|
||||||
|
- `reactiveData`
|
||||||
|
|
||||||
|
Ambos estão incluídos no módulo de `mixins`.
|
||||||
|
|
||||||
|
Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// MonthlyIncome.js
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
|
props: ["chartData", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Módulo de Mixins
|
||||||
|
O módulo de `mixins` está incluído no módulo do `VueCharts` e como módulo separado.
|
||||||
|
Algumas maneiras de importá-los:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load complete module with all charts
|
||||||
|
import VueCharts from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default VueCharts.Line.extend({
|
||||||
|
mixins: [VueCharts.mixins.reactiveProp],
|
||||||
|
props: ["chartData", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load speperate modules
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
|
props: ["chartData", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load speperate modules with destructure assign
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
const { reactiveProp } = mixins
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [reactiveProp],
|
||||||
|
props: ["chartData", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Gráficos disponíveis
|
||||||
|
|
||||||
|
### Gráfico de Barra
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Gráfico de Linha
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Donut
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Pizza
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Radar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Área Polar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Bolha
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Configurações de Build
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
# Instala as dependências
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# roda o servidor com hot reload at localhost:8080
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# build para produção com minificação
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# roda testes unitários
|
||||||
|
npm run unit
|
||||||
|
|
||||||
|
# roda testes e2e
|
||||||
|
npm run e2e
|
||||||
|
|
||||||
|
# roda todos os teste
|
||||||
|
npm test
|
||||||
|
```
|
||||||
|
|
||||||
|
Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader).
|
||||||
|
|
||||||
|
## Contribuindo
|
||||||
|
|
||||||
|
1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork )
|
||||||
|
2. Crie uma branch da sua feature (`git checkout -b my-new-feature`)
|
||||||
|
3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`)
|
||||||
|
4. Faça o push da branch (`git push origin my-new-feature`)
|
||||||
|
5. Crie uma nova requisição de pull
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Esse software é distribuído sob a licença [MIT license](LICENSE.txt).
|
||||||
294
docs/ru/README.md
Normal file
294
docs/ru/README.md
Normal file
@@ -0,0 +1,294 @@
|
|||||||
|
---
|
||||||
|
search: ru
|
||||||
|
---
|
||||||
|
|
||||||
|
<div align="center">
|
||||||
|
<img width="256" heigth="256" src="../../assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
[](https://badge.fury.io/js/vue-chartjs)
|
||||||
|
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||||
|
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||||
|
[](http://packagequality.com/#?package=vue-chartjs)
|
||||||
|
[](https://www.npmjs.com/package/vue-chartjs)
|
||||||
|
[](https://gitter.im/vue-chartjs/Lobby)
|
||||||
|
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||||
|
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||||
|
|
||||||
|
# vue-chartjs
|
||||||
|
|
||||||
|
**vue-chartjs** обертка для [Chart.js](https://github.com/chartjs/Chart.js) в vue. Вы можете с легкостью создавать многоразовые компоненты диаграмм.
|
||||||
|
|
||||||
|
## Демо & Документация
|
||||||
|
|
||||||
|
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||||
|
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||||
|
|
||||||
|
### Совместимость
|
||||||
|
|
||||||
|
- v1 later `@legacy`
|
||||||
|
- Vue.js 1.x
|
||||||
|
- v2 later
|
||||||
|
- Vue.js 2.x
|
||||||
|
|
||||||
|
После филнального выпуска vue.js 2, вы получите v2 по умолчанию, если установите vue-chartjs через npm.
|
||||||
|
Больше нет необходимости в @next теге. Если вы нуждаетесь в v1, вам необходимо указать версию или использовать legacy тег.
|
||||||
|
Если вы ищите v1, проверьте эту [ветку](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
|
||||||
|
|
||||||
|
## Установка
|
||||||
|
|
||||||
|
Просто выполните `yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
|
В случаи если вы хотите использовать библиотеку прямо в браузере, добавьте
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||||
|
```
|
||||||
|
в ваши скрипты. Смотрите [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||||
|
|
||||||
|
## Описание различий сборок
|
||||||
|
|
||||||
|
Существует три различные точки входа. Это зависит от того, какая сборка стоит у вас. Зависимости собираются или подключаются как 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, входная точка находится в `vue-chartjs.js`. Она __транслируется__ и __собирается__ при помощи UMD Module.
|
||||||
|
|
||||||
|
Однако Vue.js и Chart.js является `peerDependencies`, поэтому вы можете устанавливать их отдельно. В большинстве проектов вы в любом случаи будете иметь установленный `Vue.js`. В этом случаи, вы можете иметь различные версии Vue.js и Chart.js.
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
Если вы используете Webpack 2, он будет автоматически использовать `jsnext:main` / `module` в качестве входной точки, которая расположена в `es/index.js`.
|
||||||
|
Это транслированная es версия кода, которая не __собирается__ в модуль. Таким образом, three shaking будет работать.
|
||||||
|
Как и в собранной версии, `Vue.js` и `Chart.js` являются `peerDependencies` и не нуждаются в установке.
|
||||||
|
|
||||||
|
|
||||||
|
## Как использовать
|
||||||
|
|
||||||
|
Вам необходимо импортировать базовый класс диаграммы и унаследовать его. Это даст гораздо большую гибкость при работе с различными данными. Вы можете передать данные через props или vue-resource.
|
||||||
|
|
||||||
|
Вы можете импортировать весь проект или каждый модуль по отдельности.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import VueCharts from 'vue-chartjs'
|
||||||
|
import { Bar, Line } from 'vue-chartjs'
|
||||||
|
```
|
||||||
|
|
||||||
|
Просто создайте ваш собственный компонент.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// CommitChart.js
|
||||||
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Bar.extend({
|
||||||
|
mounted () {
|
||||||
|
// Переопределение базового рендер метода с реальными данными.
|
||||||
|
this.renderChart({
|
||||||
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'GitHub Commits',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Затем просто импортируйте и используйте ваши собственные расширенные компоненты как обычные vue компоненты.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import CommitChart from 'path/to/component/CommitChart'
|
||||||
|
```
|
||||||
|
|
||||||
|
## Другой пример с options
|
||||||
|
|
||||||
|
Вы можете переопределить стандартные опции графика. Просто передайте объект с опциями в качестве второго параметра в рендер метод.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// MonthlyIncome.js
|
||||||
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
props: ['data', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.data, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
Используйте это в вашем vue приложении
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import MonthlyIncome from 'path/to/component/MonthlyIncome'
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<monthly-income :data={....} />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: { MonthlyIncome },
|
||||||
|
....
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Реактивность
|
||||||
|
|
||||||
|
Chart.js не обновляет и не перерисовывает диаграмму при передаче новых данных.
|
||||||
|
Впрочем, вы можете реализовать это самостоятельно или использовав один из двух подключенных миксинов:
|
||||||
|
|
||||||
|
- `reactiveProp`
|
||||||
|
- `reactiveData`
|
||||||
|
|
||||||
|
Оба включены в `mixins` модуль.
|
||||||
|
|
||||||
|
Миксины автоматически создают `chartData` в виде prop или data. И добавляют watcher. Если данные были измененны, график обновится.
|
||||||
|
Но помните про ограничение vue и javascript на изменений массивов и объектов. Больше информации можно получить [здесь](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// MonthlyIncome.js
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
|
props: ['chartData', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mixins модуль
|
||||||
|
Модуль `mixins` включен в `VueCharts`, а также доступен в виде отдельного модуля.
|
||||||
|
Несколько способов импортировать их:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load complete module with all charts
|
||||||
|
import VueCharts from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default VueCharts.Line.extend({
|
||||||
|
mixins: [VueCharts.mixins.reactiveProp],
|
||||||
|
props: ['chartData', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load speperate modules
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
|
props: ['chartData', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Load speperate modules with destructure assign
|
||||||
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
const { reactiveProp } = mixins
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [reactiveProp],
|
||||||
|
props: ['chartData', 'options'],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Доступные диаграммы
|
||||||
|
|
||||||
|
### Bar Chart
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Line Chart
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Doughnut
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Pie
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Radar
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Polar Area
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Bubble
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Scatter
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Настройка сборки
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
# инициализация зависимостей
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# сборка с горячей заменой на localhost:8080
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# сборка для production с минификацией
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# запуск unit тестов
|
||||||
|
npm run unit
|
||||||
|
|
||||||
|
# запуск e2e тестов
|
||||||
|
npm run e2e
|
||||||
|
|
||||||
|
# запуск всех тестов
|
||||||
|
npm test
|
||||||
|
```
|
||||||
|
|
||||||
|
Для детальных объяснений того, как это работает, перейдите в [руководство](http://vuejs-templates.github.io/webpack/) и [документацию для vue-loader](http://vuejs.github.io/vue-loader).
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
|
||||||
|
2. Create your feature branch (`git checkout -b my-new-feature`)
|
||||||
|
3. Commit your changes (`git commit -am 'Add some feature'`)
|
||||||
|
4. Push to the branch (`git push origin my-new-feature`)
|
||||||
|
5. Create a new Pull Request
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This software is distributed under [MIT license](LICENSE.txt).
|
||||||
358
docs/zh-cn/README.md
Normal file
358
docs/zh-cn/README.md
Normal file
@@ -0,0 +1,358 @@
|
|||||||
|
---
|
||||||
|
search: zh-cn
|
||||||
|
---
|
||||||
|
|
||||||
|
# vue-chartjs
|
||||||
|
**vue-chartjs** 是基于 vue 的 [Chart.js](https://github.com/chartjs/Chart.js) 封装。你可以轻松的创建可复用的图表组件。
|
||||||
|
|
||||||
|
## 简介
|
||||||
|
`vue-chartjs` 让你在 vue 中使用 chart.js 省去很多麻烦。非常适合需要快速生成简单图表的人。
|
||||||
|
|
||||||
|
它抽象化了基本逻辑但提供了非常灵活的 chart.js 对象。
|
||||||
|
|
||||||
|
## 安装
|
||||||
|
如果你正在使用 Vue.js 2.x 的版本，只需要运行：
|
||||||
|
|
||||||
|
`yarn add vue-chartjs chart.js`
|
||||||
|
|
||||||
|
如果你正在使用 Vue.js 1.x 的版本，请使用 `legacy` 标签。然而这个版本已经不再维护了。
|
||||||
|
|
||||||
|
`yarn add vue-chartjs@legacy`
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
你需要引入基本图表并且扩展它。这在处理不同的数据时提供了更多的灵活性。
|
||||||
|
|
||||||
|
你可以封装您的组件，并使用 props 来传递数据。或者直接将数据放入组件中，但是这样做组件就不能复用了。
|
||||||
|
|
||||||
|
你可以加载整个包或者按需加载。
|
||||||
|
|
||||||
|
```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()` 方法传递两个参数：
|
||||||
|
|
||||||
|
- 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) 的文档。
|
||||||
|
|
||||||
|
## 属性
|
||||||
|
|
||||||
|
基本图表中定义了一些属性。因为你 `extend()` 了它们，他们使用 *初始值*，但是你可以覆盖它们：
|
||||||
|
|
||||||
|
| 属性 | 说明 |
|
||||||
|
|---|---|
|
||||||
|
| width | 图表宽度 |
|
||||||
|
| height | 图表高度 |
|
||||||
|
| chart-id | canvas的id |
|
||||||
|
|
||||||
|
|
||||||
|
## 实例
|
||||||
|
|
||||||
|
下面是一些实例。
|
||||||
|
|
||||||
|
### 图表和属性
|
||||||
|
|
||||||
|
你可以创建数据和选项传递给图表。
|
||||||
|
|
||||||
|
```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">
|
||||||
|
请注意，你必须设置 `responsive: false` 才可以使用 `width` 和 `height`。
|
||||||
|
</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` 提供了两种方式。
|
||||||
|
|
||||||
|
- `reactiveProp`
|
||||||
|
- `reactiveData`
|
||||||
|
|
||||||
|
两种方式其实是一样的。多部分情况会使用 `reactiveProp`。它扩展了图表逻辑并且自动添加 `chartData` props 和 `vue watch`。当数据改变，它将会调用 `update()`。当添加了新的数据集，将会调用 `renderChart()`。
|
||||||
|
|
||||||
|
`reactiveData` 只是创建了本地变量并且添加到 watcher，而不是 prop，他只用在你创建单一图表并且在组件创建 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>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
|
||||||
|
<li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
|
||||||
|
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## Chart.js 对象
|
||||||
|
|
||||||
|
有时你需要更多的调整 chart.js。你可以访问 `this._chart` 实例。
|
||||||
|
|
||||||
|
## 内联插件
|
||||||
|
|
||||||
|
在 Chart.js 你可以定义全局和内联插件。全局插件在 `vue-chartjs` 中没有问题，参照 [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) 的说明。
|
||||||
|
|
||||||
|
如果你想添加内联插件 `vue-chartjs` 提供了一个方法 `addPlugin()`
|
||||||
|
|
||||||
|
你必须在 `renderChart()` 之前调用 `addPlugin()` 方法。
|
||||||
|
|
||||||
|
### 实例
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
mounted () {
|
||||||
|
this.addPlugin({
|
||||||
|
id: 'my-plugin',
|
||||||
|
beforeInit: function (chart) {
|
||||||
|
....
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 支持的图表
|
||||||
|
|
||||||
|
### 柱状图
|
||||||
|
|
||||||
|
<p class="tip">
|
||||||
|
柱状图有两个版本。 `{Bar}` 和 `{HorizontalBar}`
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 折线图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 环形图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 饼图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 雷达图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 极坐标
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 热点图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 散点图
|
||||||
|
|
||||||
|
这个图表有不同的数据结构。目前动态数据不适用于此图表类型。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 不同构建工具的说明
|
||||||
|
有三种不同的切入点，取决于你用哪种构建工具。作为 dependencies 或者 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 绑定在了一起，你只需要一个文件。
|
||||||
|
|
||||||
|
|
||||||
|
### Browserify / Webpack 1
|
||||||
|
|
||||||
|
如果你使用 Gulp, Browserify 或者 Webpack 1，`vue-chartjs.js` 被捆绑到 UMD 模块。
|
||||||
|
|
||||||
|
然而 Vue.js 和 Chart.js 是 `peerDependencies` 所以你需要独立安装它们。 大部分情况下你已经安装了 `Vue.js`，你可以使用不同版本的 Vue.js 和 Chart.js。
|
||||||
|
|
||||||
|
### Webpack 2
|
||||||
|
如果你使用 Webpack 2 它将自动使用 `jsnext:main` / `module` 入口。
|
||||||
|
像捆绑版本一样，`Vue.js` 和 `Chart.js` 都是 `peerDependencies`，需要安装。
|
||||||
|
|
||||||
|
## 资源
|
||||||
|
|
||||||
|
你可以在这里找到一些如何使用 `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/)
|
||||||
16
package.json
16
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "2.6.3",
|
"version": "2.8.1",
|
||||||
"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",
|
||||||
@@ -60,19 +60,19 @@
|
|||||||
"lodash": "^4.17.4"
|
"lodash": "^4.17.4"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "^2.5.0",
|
"chart.js": "^2.6.0",
|
||||||
"vue": "^2.3.3"
|
"vue": "^2.4.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.24.1",
|
"babel-cli": "^6.24.1",
|
||||||
"babel-core": "^6.24.1",
|
"babel-core": "^6.25.0",
|
||||||
"babel-loader": "^7.0.0",
|
"babel-loader": "^7.0.0",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-stage-2": "^6.24.1",
|
"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.6.0",
|
||||||
"chromedriver": "^2.28.0",
|
"chromedriver": "^2.28.0",
|
||||||
"connect-history-api-fallback": "^1.1.0",
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
"cross-env": "^3.2.4",
|
"cross-env": "^3.2.4",
|
||||||
@@ -117,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.3.3",
|
"vue": "^2.4.2",
|
||||||
"vue-hot-reload-api": "^2.1.0",
|
"vue-hot-reload-api": "^2.1.0",
|
||||||
"vue-html-loader": "^1.2.4",
|
"vue-html-loader": "^1.2.4",
|
||||||
"vue-loader": "^12.0.4",
|
"vue-loader": "^12.2.2",
|
||||||
"vue-style-loader": "^3.0.1",
|
"vue-style-loader": "^3.0.1",
|
||||||
"vue-template-compiler": "^2.3.3",
|
"vue-template-compiler": "^2.4.2",
|
||||||
"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",
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -20,7 +23,6 @@ export default Vue.extend({
|
|||||||
]
|
]
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
chartId: {
|
chartId: {
|
||||||
default: 'bar-chart',
|
default: 'bar-chart',
|
||||||
@@ -33,9 +35,22 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
@@ -56,24 +71,30 @@ export default Vue.extend({
|
|||||||
barPercentage: 0.2
|
barPercentage: 0.2
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
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'), {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,6 +36,20 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -56,11 +73,15 @@ export default Vue.extend({
|
|||||||
barPercentage: 0.2
|
barPercentage: 0.2
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -68,13 +89,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'bubble',
|
type: 'bubble',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,17 +36,35 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -51,13 +72,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'doughnut',
|
type: 'doughnut',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,6 +36,20 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -56,24 +73,30 @@ export default Vue.extend({
|
|||||||
barPercentage: 0.2
|
barPercentage: 0.2
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options, type) {
|
renderChart (data, options, type) {
|
||||||
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'), {
|
||||||
type: 'horizontalBar',
|
type: 'horizontalBar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,6 +36,20 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -54,11 +71,15 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -66,13 +87,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,17 +36,35 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -51,13 +72,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,17 +36,35 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -51,13 +72,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'polarArea',
|
type: 'polarArea',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
return createElement(
|
return createElement(
|
||||||
'div',
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
[
|
[
|
||||||
createElement(
|
createElement(
|
||||||
'canvas', {
|
'canvas', {
|
||||||
@@ -33,17 +36,35 @@ export default Vue.extend({
|
|||||||
height: {
|
height: {
|
||||||
default: 400,
|
default: 400,
|
||||||
type: Number
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
}
|
},
|
||||||
|
plugins: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
@@ -51,13 +72,15 @@ export default Vue.extend({
|
|||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'radar',
|
type: 'radar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this._chart.generateLegend()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
this._chart.destroy()
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
92
src/BaseCharts/Scatter.js
Normal file
92
src/BaseCharts/Scatter.js
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Chart from 'chart.js'
|
||||||
|
import { mergeOptions } from '../helpers/options'
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
'div', {
|
||||||
|
style: this.styles,
|
||||||
|
class: this.cssClasses
|
||||||
|
},
|
||||||
|
[
|
||||||
|
createElement(
|
||||||
|
'canvas', {
|
||||||
|
attrs: {
|
||||||
|
id: this.chartId,
|
||||||
|
width: this.width,
|
||||||
|
height: this.height
|
||||||
|
},
|
||||||
|
ref: 'canvas'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
]
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
chartId: {
|
||||||
|
default: 'scatter-chart',
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
default: 400,
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
default: 400,
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
cssClasses: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
defaultOptions: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
type: 'linear',
|
||||||
|
position: 'bottom'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addPlugin (plugin) {
|
||||||
|
this.plugins.push(plugin)
|
||||||
|
},
|
||||||
|
renderChart (data, options) {
|
||||||
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
|
this._chart = new Chart(
|
||||||
|
this.$refs.canvas.getContext('2d'), {
|
||||||
|
type: 'scatter',
|
||||||
|
data: data,
|
||||||
|
options: chartOptions,
|
||||||
|
plugins: this.plugins
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,21 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 style="text-align:center;margin:40px 0;">Barchart</h1>
|
<div class="Chart">
|
||||||
<bar-example></bar-example>
|
<h1 style="text-align:center;">Barchart</h1>
|
||||||
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
|
<bar-example></bar-example>
|
||||||
<reactive-example></reactive-example>
|
</div>
|
||||||
<h1 style="text-align:center;margin:40px 0;">Linechart</h1>
|
|
||||||
<line-example></line-example>
|
<div class="Chart">
|
||||||
<h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
|
<h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
|
||||||
<doughnut-example></doughnut-example>
|
<reactive-example></reactive-example>
|
||||||
<h1 style="text-align:center;margin:40px 0;">Piechart</h1>
|
</div>
|
||||||
<pie-example></pie-example>
|
|
||||||
<h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
|
<div class="Chart">
|
||||||
<radar-example></radar-example>
|
<h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
|
||||||
<h1 style="text-align:center;margin:40px 0;">Polararea</h1>
|
<reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
|
||||||
<polar-area-example></polar-area-example>
|
</div>
|
||||||
<h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
|
|
||||||
<bubble-example></bubble-example>
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Linechart</h1>
|
||||||
|
<line-example></line-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Doughnutchart</h1>
|
||||||
|
<doughnut-example></doughnut-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Piechart</h1>
|
||||||
|
<pie-example></pie-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Radarchart</h1>
|
||||||
|
<radar-example></radar-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Polararea</h1>
|
||||||
|
<polar-area-example></polar-area-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Bubblechart</h1>
|
||||||
|
<bubble-example></bubble-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Scatter Chart</h1>
|
||||||
|
<scatter-example></scatter-example>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -29,6 +62,7 @@
|
|||||||
import BubbleExample from './BubbleExample'
|
import BubbleExample from './BubbleExample'
|
||||||
import ReactiveExample from './ReactiveExample'
|
import ReactiveExample from './ReactiveExample'
|
||||||
import ReactivePropExample from './ReactivePropExample'
|
import ReactivePropExample from './ReactivePropExample'
|
||||||
|
import ScatterExample from './ScatterExample'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -40,7 +74,47 @@
|
|||||||
PolarAreaExample,
|
PolarAreaExample,
|
||||||
BubbleExample,
|
BubbleExample,
|
||||||
ReactiveExample,
|
ReactiveExample,
|
||||||
ReactivePropExample
|
ReactivePropExample,
|
||||||
|
ScatterExample
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dataPoints: null,
|
||||||
|
height: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
setInterval(() => {
|
||||||
|
this.fillData()
|
||||||
|
}, 2000)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
increaseHeight () {
|
||||||
|
this.height += 10
|
||||||
|
},
|
||||||
|
getRandomInt () {
|
||||||
|
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||||
|
},
|
||||||
|
fillData () {
|
||||||
|
this.dataPoints = {
|
||||||
|
labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Data One',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
myStyles () {
|
||||||
|
return {
|
||||||
|
height: `${this.height}px`,
|
||||||
|
position: 'relative'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -50,4 +124,21 @@
|
|||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Helvetica', Arial;
|
||||||
|
color: #464646;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 1px solid #f1f1f1;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Chart {
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 50px 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,6 +5,6 @@ export default BarChart.extend({
|
|||||||
mixins: [reactiveProp],
|
mixins: [reactiveProp],
|
||||||
|
|
||||||
mounted () {
|
mounted () {
|
||||||
this.renderChart(this.chartData)
|
this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
52
src/examples/ScatterExample.js
Normal file
52
src/examples/ScatterExample.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import Scatter from '../BaseCharts/Scatter'
|
||||||
|
|
||||||
|
export default Scatter.extend({
|
||||||
|
mounted () {
|
||||||
|
this.renderChart({
|
||||||
|
datasets: [{
|
||||||
|
label: 'Scatter Dataset 1',
|
||||||
|
fill: false,
|
||||||
|
borderColor: '#f87979',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [{
|
||||||
|
x: -2,
|
||||||
|
y: 4
|
||||||
|
}, {
|
||||||
|
x: -1,
|
||||||
|
y: 1
|
||||||
|
}, {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
}, {
|
||||||
|
x: 1,
|
||||||
|
y: 1
|
||||||
|
}, {
|
||||||
|
x: 2,
|
||||||
|
y: 4
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Scatter Dataset 2',
|
||||||
|
fill: false,
|
||||||
|
borderColor: '#7acbf9',
|
||||||
|
backgroundColor: '#7acbf9',
|
||||||
|
data: [{
|
||||||
|
x: -2,
|
||||||
|
y: -4
|
||||||
|
}, {
|
||||||
|
x: -1,
|
||||||
|
y: -1
|
||||||
|
}, {
|
||||||
|
x: 0,
|
||||||
|
y: 1
|
||||||
|
}, {
|
||||||
|
x: 1,
|
||||||
|
y: -1
|
||||||
|
}, {
|
||||||
|
x: 2,
|
||||||
|
y: -4
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}, {responsive: true, maintainAspectRatio: false})
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -6,6 +6,7 @@ import Pie from './BaseCharts/Pie'
|
|||||||
import PolarArea from './BaseCharts/PolarArea'
|
import PolarArea from './BaseCharts/PolarArea'
|
||||||
import Radar from './BaseCharts/Radar'
|
import Radar from './BaseCharts/Radar'
|
||||||
import Bubble from './BaseCharts/Bubble'
|
import Bubble from './BaseCharts/Bubble'
|
||||||
|
import Scatter from './BaseCharts/Scatter'
|
||||||
import mixins from './mixins/index.js'
|
import mixins from './mixins/index.js'
|
||||||
import npmCfg from '../package.json'
|
import npmCfg from '../package.json'
|
||||||
|
|
||||||
@@ -19,6 +20,7 @@ const VueCharts = {
|
|||||||
PolarArea,
|
PolarArea,
|
||||||
Radar,
|
Radar,
|
||||||
Bubble,
|
Bubble,
|
||||||
|
Scatter,
|
||||||
mixins
|
mixins
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,5 +36,6 @@ export {
|
|||||||
PolarArea,
|
PolarArea,
|
||||||
Radar,
|
Radar,
|
||||||
Bubble,
|
Bubble,
|
||||||
|
Scatter,
|
||||||
mixins
|
mixins
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,7 +26,26 @@ module.exports = {
|
|||||||
// Check if Labels are equal and if dataset length is equal
|
// Check if Labels are equal and if dataset length is equal
|
||||||
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
||||||
newData.datasets.forEach((dataset, i) => {
|
newData.datasets.forEach((dataset, i) => {
|
||||||
chart.data.datasets[i] = dataset
|
// Get new and old dataset keys
|
||||||
|
const oldDatasetKeys = Object.keys(oldData.datasets[i])
|
||||||
|
const newDatasetKeys = Object.keys(dataset)
|
||||||
|
|
||||||
|
// Get keys that aren't present in the new data
|
||||||
|
const deletionKeys = oldDatasetKeys.filter((key) => {
|
||||||
|
return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
|
||||||
|
})
|
||||||
|
|
||||||
|
// Remove outdated key-value pairs
|
||||||
|
deletionKeys.forEach((deletionKey) => {
|
||||||
|
delete chart.data.datasets[i][deletionKey]
|
||||||
|
})
|
||||||
|
|
||||||
|
// Update attributes individually to avoid re-rendering the entire chart
|
||||||
|
for (const attribute in dataset) {
|
||||||
|
if (dataset.hasOwnProperty(attribute)) {
|
||||||
|
chart.data.datasets[i][attribute] = dataset[attribute]
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
chart.data.labels = newData.labels
|
chart.data.labels = newData.labels
|
||||||
@@ -35,6 +54,8 @@ module.exports = {
|
|||||||
chart.destroy()
|
chart.destroy()
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ module.exports = {
|
|||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
'chartData': {
|
'chartData': {
|
||||||
handler (newData, oldData) {
|
handler (newData, oldData) {
|
||||||
@@ -27,7 +26,26 @@ module.exports = {
|
|||||||
// Check if Labels are equal and if dataset length is equal
|
// Check if Labels are equal and if dataset length is equal
|
||||||
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
||||||
newData.datasets.forEach((dataset, i) => {
|
newData.datasets.forEach((dataset, i) => {
|
||||||
chart.data.datasets[i] = dataset
|
// Get new and old dataset keys
|
||||||
|
const oldDatasetKeys = Object.keys(oldData.datasets[i])
|
||||||
|
const newDatasetKeys = Object.keys(dataset)
|
||||||
|
|
||||||
|
// Get keys that aren't present in the new data
|
||||||
|
const deletionKeys = oldDatasetKeys.filter((key) => {
|
||||||
|
return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
|
||||||
|
})
|
||||||
|
|
||||||
|
// Remove outdated key-value pairs
|
||||||
|
deletionKeys.forEach((deletionKey) => {
|
||||||
|
delete chart.data.datasets[i][deletionKey]
|
||||||
|
})
|
||||||
|
|
||||||
|
// Update attributes individually to avoid re-rendering the entire chart
|
||||||
|
for (const attribute in dataset) {
|
||||||
|
if (dataset.hasOwnProperty(attribute)) {
|
||||||
|
chart.data.datasets[i][attribute] = dataset[attribute]
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
chart.data.labels = newData.labels
|
chart.data.labels = newData.labels
|
||||||
@@ -36,6 +54,8 @@ module.exports = {
|
|||||||
chart.destroy()
|
chart.destroy()
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -57,8 +57,28 @@ describe('BarChart', () => {
|
|||||||
|
|
||||||
vm.$nextTick(() => {
|
vm.$nextTick(() => {
|
||||||
vm.$forceUpdate()
|
vm.$forceUpdate()
|
||||||
expect(vm.$children[0]._chart.chart.ctx).to.be.null
|
expect(vm.$children[0]._chart.chart.ctx).to.equal
|
||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
BarChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { BarChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,4 +61,24 @@ describe('BubbleChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
BubbleChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { BubbleChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,4 +61,24 @@ describe('DoughnutChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
DoughnutChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { DoughnutChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,4 +61,24 @@ describe('HorizontalBarChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
HorizontalBarChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { HorizontalBarChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,4 +61,24 @@ describe('LineChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
LineChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { LineChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -60,4 +60,24 @@ describe('PieChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
PieChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { PieChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,4 +61,24 @@ describe('PolarChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
PolarChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { PolarChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -60,4 +60,24 @@ describe('RadarChart', () => {
|
|||||||
done()
|
done()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
RadarChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { RadarChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
84
test/unit/specs/Scatter.spec.js
Normal file
84
test/unit/specs/Scatter.spec.js
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import ScatterChart from 'src/examples/ScatterExample'
|
||||||
|
|
||||||
|
describe('ScatterChart', () => {
|
||||||
|
let el
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
el = document.createElement('div')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render a canvas', () => {
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
ScatterChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { ScatterChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('#scatter-chart')).not.to.be.an('undefined')
|
||||||
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should change id based on prop', () => {
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
ScatterChart, {
|
||||||
|
props: {
|
||||||
|
chartId: 'linechartprop'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { ScatterChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should destroy chart instance', (done) => {
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
ScatterChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { ScatterChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
|
||||||
|
|
||||||
|
vm.$destroy()
|
||||||
|
|
||||||
|
vm.$nextTick(() => {
|
||||||
|
vm.$forceUpdate()
|
||||||
|
expect(vm.$children[0]._chart.chart.ctx).to.be.null
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should add an inline plugin to the array', () => {
|
||||||
|
const testPlugin = {
|
||||||
|
id: 'test'
|
||||||
|
}
|
||||||
|
|
||||||
|
const vm = new Vue({
|
||||||
|
render: function (createElement) {
|
||||||
|
return createElement(
|
||||||
|
ScatterChart
|
||||||
|
)
|
||||||
|
},
|
||||||
|
components: { ScatterChart }
|
||||||
|
}).$mount(el)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins).to.exist
|
||||||
|
vm.$children[0].addPlugin(testPlugin)
|
||||||
|
|
||||||
|
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||||
|
})
|
||||||
|
})
|
||||||
93
yarn.lock
93
yarn.lock
@@ -269,20 +269,20 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
|
|||||||
esutils "^2.0.2"
|
esutils "^2.0.2"
|
||||||
js-tokens "^3.0.0"
|
js-tokens "^3.0.0"
|
||||||
|
|
||||||
babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
|
babel-core@^6.1.4, babel-core@^6.24.1, babel-core@^6.25.0, babel-core@~6:
|
||||||
version "6.24.1"
|
version "6.25.0"
|
||||||
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
|
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
|
||||||
dependencies:
|
dependencies:
|
||||||
babel-code-frame "^6.22.0"
|
babel-code-frame "^6.22.0"
|
||||||
babel-generator "^6.24.1"
|
babel-generator "^6.25.0"
|
||||||
babel-helpers "^6.24.1"
|
babel-helpers "^6.24.1"
|
||||||
babel-messages "^6.23.0"
|
babel-messages "^6.23.0"
|
||||||
babel-register "^6.24.1"
|
babel-register "^6.24.1"
|
||||||
babel-runtime "^6.22.0"
|
babel-runtime "^6.22.0"
|
||||||
babel-template "^6.24.1"
|
babel-template "^6.25.0"
|
||||||
babel-traverse "^6.24.1"
|
babel-traverse "^6.25.0"
|
||||||
babel-types "^6.24.1"
|
babel-types "^6.25.0"
|
||||||
babylon "^6.11.0"
|
babylon "^6.17.2"
|
||||||
convert-source-map "^1.1.0"
|
convert-source-map "^1.1.0"
|
||||||
debug "^2.1.1"
|
debug "^2.1.1"
|
||||||
json5 "^0.5.0"
|
json5 "^0.5.0"
|
||||||
@@ -293,13 +293,13 @@ babel-core@^6.1.4, babel-core@^6.24.1, babel-core@~6:
|
|||||||
slash "^1.0.0"
|
slash "^1.0.0"
|
||||||
source-map "^0.5.0"
|
source-map "^0.5.0"
|
||||||
|
|
||||||
babel-generator@^6.24.1:
|
babel-generator@^6.25.0:
|
||||||
version "6.24.1"
|
version "6.25.0"
|
||||||
resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.1.tgz#e715f486c58ded25649d888944d52aa07c5d9497"
|
resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
|
||||||
dependencies:
|
dependencies:
|
||||||
babel-messages "^6.23.0"
|
babel-messages "^6.23.0"
|
||||||
babel-runtime "^6.22.0"
|
babel-runtime "^6.22.0"
|
||||||
babel-types "^6.24.1"
|
babel-types "^6.25.0"
|
||||||
detect-indent "^4.0.0"
|
detect-indent "^4.0.0"
|
||||||
jsesc "^1.3.0"
|
jsesc "^1.3.0"
|
||||||
lodash "^4.2.0"
|
lodash "^4.2.0"
|
||||||
@@ -798,6 +798,16 @@ babel-template@^6.24.1:
|
|||||||
babylon "^6.11.0"
|
babylon "^6.11.0"
|
||||||
lodash "^4.2.0"
|
lodash "^4.2.0"
|
||||||
|
|
||||||
|
babel-template@^6.25.0:
|
||||||
|
version "6.25.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
|
||||||
|
dependencies:
|
||||||
|
babel-runtime "^6.22.0"
|
||||||
|
babel-traverse "^6.25.0"
|
||||||
|
babel-types "^6.25.0"
|
||||||
|
babylon "^6.17.2"
|
||||||
|
lodash "^4.2.0"
|
||||||
|
|
||||||
babel-traverse@^6.24.1:
|
babel-traverse@^6.24.1:
|
||||||
version "6.24.1"
|
version "6.24.1"
|
||||||
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
|
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.24.1.tgz#ab36673fd356f9a0948659e7b338d5feadb31695"
|
||||||
@@ -812,6 +822,20 @@ babel-traverse@^6.24.1:
|
|||||||
invariant "^2.2.0"
|
invariant "^2.2.0"
|
||||||
lodash "^4.2.0"
|
lodash "^4.2.0"
|
||||||
|
|
||||||
|
babel-traverse@^6.25.0:
|
||||||
|
version "6.25.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
|
||||||
|
dependencies:
|
||||||
|
babel-code-frame "^6.22.0"
|
||||||
|
babel-messages "^6.23.0"
|
||||||
|
babel-runtime "^6.22.0"
|
||||||
|
babel-types "^6.25.0"
|
||||||
|
babylon "^6.17.2"
|
||||||
|
debug "^2.2.0"
|
||||||
|
globals "^9.0.0"
|
||||||
|
invariant "^2.2.0"
|
||||||
|
lodash "^4.2.0"
|
||||||
|
|
||||||
babel-types@^6.19.0, babel-types@^6.24.1:
|
babel-types@^6.19.0, babel-types@^6.24.1:
|
||||||
version "6.24.1"
|
version "6.24.1"
|
||||||
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
|
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.24.1.tgz#a136879dc15b3606bda0d90c1fc74304c2ff0975"
|
||||||
@@ -821,6 +845,15 @@ babel-types@^6.19.0, babel-types@^6.24.1:
|
|||||||
lodash "^4.2.0"
|
lodash "^4.2.0"
|
||||||
to-fast-properties "^1.0.1"
|
to-fast-properties "^1.0.1"
|
||||||
|
|
||||||
|
babel-types@^6.25.0:
|
||||||
|
version "6.25.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
|
||||||
|
dependencies:
|
||||||
|
babel-runtime "^6.22.0"
|
||||||
|
esutils "^2.0.2"
|
||||||
|
lodash "^4.2.0"
|
||||||
|
to-fast-properties "^1.0.1"
|
||||||
|
|
||||||
babylon@^6.11.0:
|
babylon@^6.11.0:
|
||||||
version "6.14.1"
|
version "6.14.1"
|
||||||
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
|
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
|
||||||
@@ -829,6 +862,10 @@ babylon@^6.15.0:
|
|||||||
version "6.16.1"
|
version "6.16.1"
|
||||||
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
|
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
|
||||||
|
|
||||||
|
babylon@^6.17.2:
|
||||||
|
version "6.17.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.3.tgz#1327d709950b558f204e5352587fd0290f8d8e48"
|
||||||
|
|
||||||
backo2@1.0.2:
|
backo2@1.0.2:
|
||||||
version "1.0.2"
|
version "1.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
|
resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
|
||||||
@@ -1086,11 +1123,11 @@ change-case@3.0.x:
|
|||||||
upper-case "^1.1.1"
|
upper-case "^1.1.1"
|
||||||
upper-case-first "^1.1.0"
|
upper-case-first "^1.1.0"
|
||||||
|
|
||||||
chart.js@^2.5.0:
|
chart.js@^2.6.0:
|
||||||
version "2.5.0"
|
version "2.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.5.0.tgz#fe6e751a893769f56e72bee5ad91207e1c592957"
|
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.6.0.tgz#308f9a4b0bfed5a154c14f5deb1d9470d22abe71"
|
||||||
dependencies:
|
dependencies:
|
||||||
chartjs-color "^2.0.0"
|
chartjs-color "^2.1.0"
|
||||||
moment "^2.10.6"
|
moment "^2.10.6"
|
||||||
|
|
||||||
chartjs-color-string@^0.4.0:
|
chartjs-color-string@^0.4.0:
|
||||||
@@ -1099,9 +1136,9 @@ chartjs-color-string@^0.4.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
color-name "^1.0.0"
|
color-name "^1.0.0"
|
||||||
|
|
||||||
chartjs-color@^2.0.0:
|
chartjs-color@^2.1.0:
|
||||||
version "2.0.0"
|
version "2.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
|
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
|
||||||
dependencies:
|
dependencies:
|
||||||
chartjs-color-string "^0.4.0"
|
chartjs-color-string "^0.4.0"
|
||||||
color-convert "^0.5.3"
|
color-convert "^0.5.3"
|
||||||
@@ -5670,9 +5707,9 @@ vue-html-loader@^1.2.4:
|
|||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
object-assign "^4.1.0"
|
object-assign "^4.1.0"
|
||||||
|
|
||||||
vue-loader@^12.0.4:
|
vue-loader@^12.2.2:
|
||||||
version "12.0.4"
|
version "12.2.2"
|
||||||
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.0.4.tgz#bc9385326e3fd6538606454977baa91eacc6e6fd"
|
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"
|
||||||
dependencies:
|
dependencies:
|
||||||
consolidate "^0.14.0"
|
consolidate "^0.14.0"
|
||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
@@ -5695,9 +5732,9 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
|
|||||||
hash-sum "^1.0.2"
|
hash-sum "^1.0.2"
|
||||||
loader-utils "^1.0.2"
|
loader-utils "^1.0.2"
|
||||||
|
|
||||||
vue-template-compiler@^2.3.3:
|
vue-template-compiler@^2.4.2:
|
||||||
version "2.3.3"
|
version "2.4.2"
|
||||||
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.3.3.tgz#b5bab9ec57309c906b82a78c81a02179dbc2f470"
|
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.4.2.tgz#5a45d843f148b098f6c1d1e35ac20c4956d30ad1"
|
||||||
dependencies:
|
dependencies:
|
||||||
de-indent "^1.0.2"
|
de-indent "^1.0.2"
|
||||||
he "^1.1.0"
|
he "^1.1.0"
|
||||||
@@ -5706,9 +5743,9 @@ vue-template-es2015-compiler@^1.2.2:
|
|||||||
version "1.4.0"
|
version "1.4.0"
|
||||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
|
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.4.0.tgz#7b88853ca4bf8d84ae54ab9e56771de271e60198"
|
||||||
|
|
||||||
vue@^2.3.3:
|
vue@^2.4.2:
|
||||||
version "2.3.3"
|
version "2.4.2"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.3.tgz#d1eaa8fde5240735a4563e74f2c7fead9cbb064c"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-2.4.2.tgz#a9855261f191c978cc0dc1150531b8d08149b58c"
|
||||||
|
|
||||||
watchpack@^0.2.1:
|
watchpack@^0.2.1:
|
||||||
version "0.2.9"
|
version "0.2.9"
|
||||||
|
|||||||
Reference in New Issue
Block a user