KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

save chart instance on vm instance and add destroy() hooks to properly destroy chart when component is destroyed.

Browse Source
This commit is contained in:
Thorsten
2016-08-19 21:30:39 +02:00
parent 44eb15a89a
commit 998b190007
6 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/BaseCharts/Bar.js
View File

@@ -45,14 +45,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'bar', type: 'bar',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })

7
src/BaseCharts/Doughnut.js
View File

@@ -28,14 +28,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'doughnut', type: 'doughnut',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })

7
src/BaseCharts/Line.js
View File

@@ -43,14 +43,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'line', type: 'line',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })

7
src/BaseCharts/Pie.js
View File

@@ -28,14 +28,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'pie', type: 'pie',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })

7
src/BaseCharts/PolarArea.js
View File

@@ -28,14 +28,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'polarArea', type: 'polarArea',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })

7
src/BaseCharts/Radar.js
View File

@@ -28,14 +28,17 @@ export default Vue.extend({
methods: { methods: {
render (data, options = this.options) { render (data, options = this.options) {
const chart = new Chart( this._chart = new Chart(
this.$els.canvas.getContext('2d'), { this.$els.canvas.getContext('2d'), {
type: 'radar', type: 'radar',
data: data, data: data,
options: options options: options
} }
) )
chart.generateLegend() this._chart.generateLegend()
} }
},
destroy () {
this._chart.destroy()
} }
}) })