mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
52 lines
923 B
JavaScript
52 lines
923 B
JavaScript
import Vue from 'vue'
|
|
import Chart from 'chart.js'
|
|
import { mergeOptions } from '../helpers/options'
|
|
|
|
export default Vue.extend({
|
|
template: `
|
|
<div>
|
|
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
|
</div>
|
|
`,
|
|
|
|
props: {
|
|
chartId: {
|
|
default: 'polar-chart',
|
|
type: String
|
|
},
|
|
width: {
|
|
default: 400,
|
|
type: Number
|
|
},
|
|
height: {
|
|
default: 400,
|
|
type: Number
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
defaultOptions: {
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
renderChart (data, options) {
|
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
|
|
this._chart = new Chart(
|
|
this.$refs.canvas.getContext('2d'), {
|
|
type: 'polarArea',
|
|
data: data,
|
|
options: chartOptions
|
|
}
|
|
)
|
|
this._chart.generateLegend()
|
|
}
|
|
},
|
|
beforeDestroy () {
|
|
this._chart.destroy()
|
|
}
|
|
})
|