mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
32229fbfdd
You can now pass in css classes as a string for the surrounding div of the canvas and a styles object which will be applied as inline styles.
This way you can have a dynamic height with `reposnive: true`
## Example
```js
<template>
<line-chart :styles="myStyles"/>
</template>
<script>
export default {
data () {
return {
height: 100
}
},
computed: {
myStyles () {
return {
height: `${this.height}px`,
position: 'relative'
}
}
}
}
</script>
```
87 lines
1.5 KiB
JavaScript
87 lines
1.5 KiB
JavaScript
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: 'pie-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: '200%',
|
|
position: 'relative'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
defaultOptions: {
|
|
},
|
|
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: 'pie',
|
|
data: data,
|
|
options: chartOptions,
|
|
plugins: this.plugins
|
|
}
|
|
)
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
if (this._chart) {
|
|
this._chart.destroy()
|
|
}
|
|
}
|
|
})
|