mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
📝 Update README
This commit is contained in:
50
README.md
50
README.md
@@ -100,11 +100,58 @@ However you can simply implement this by your own or use one of the two mixins w
|
|||||||
- `reactiveProp`
|
- `reactiveProp`
|
||||||
- `reactiveData`
|
- `reactiveData`
|
||||||
|
|
||||||
|
Both are included in the `mixins` module.
|
||||||
|
|
||||||
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// MonthlyIncome.js
|
// MonthlyIncome.js
|
||||||
import { Line, reactiveProp } from 'vue-chartjs'
|
import { Line, mixins } from 'vue-chartjs'
|
||||||
|
|
||||||
|
export default Line.extend({
|
||||||
|
mixins: [mixins.reactiveProp],
|
||||||
|
props: ["chartData", "options"],
|
||||||
|
mounted () {
|
||||||
|
this.renderChart(this.chartData, this.options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mixins module
|
||||||
|
The `mixins` module is included in the `VueCharts` module and as a seperate module.
|
||||||
|
Some ways to import them:
|
||||||
|
|
||||||
|
```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({
|
export default Line.extend({
|
||||||
mixins: [reactiveProp],
|
mixins: [reactiveProp],
|
||||||
@@ -113,7 +160,6 @@ export default Line.extend({
|
|||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|||||||
Reference in New Issue
Block a user