From 998b190007ebe917024dcab44491b8c3e1449375 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 19 Aug 2016 21:30:39 +0200 Subject: [PATCH 1/2] save chart instance on vm instance and add destroy() hooks to properly destroy chart when component is destroyed. --- src/BaseCharts/Bar.js | 7 +++++-- src/BaseCharts/Doughnut.js | 7 +++++-- src/BaseCharts/Line.js | 7 +++++-- src/BaseCharts/Pie.js | 7 +++++-- src/BaseCharts/PolarArea.js | 7 +++++-- src/BaseCharts/Radar.js | 7 +++++-- 6 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js index 7f22df1..b8c7695 100644 --- a/src/BaseCharts/Bar.js +++ b/src/BaseCharts/Bar.js @@ -45,14 +45,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'bar', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js index 4f421d6..533b0fd 100644 --- a/src/BaseCharts/Doughnut.js +++ b/src/BaseCharts/Doughnut.js @@ -28,14 +28,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'doughnut', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js index 70cee69..174b2ef 100644 --- a/src/BaseCharts/Line.js +++ b/src/BaseCharts/Line.js @@ -43,14 +43,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'line', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js index 4eb89af..bb31b2a 100644 --- a/src/BaseCharts/Pie.js +++ b/src/BaseCharts/Pie.js @@ -28,14 +28,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'pie', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js index 1c5f8bf..dafece2 100644 --- a/src/BaseCharts/PolarArea.js +++ b/src/BaseCharts/PolarArea.js @@ -28,14 +28,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'polarArea', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js index a5f5eaf..2232527 100644 --- a/src/BaseCharts/Radar.js +++ b/src/BaseCharts/Radar.js @@ -28,14 +28,17 @@ export default Vue.extend({ methods: { render (data, options = this.options) { - const chart = new Chart( + this._chart = new Chart( this.$els.canvas.getContext('2d'), { type: 'radar', data: data, options: options } ) - chart.generateLegend() + this._chart.generateLegend() } + }, + destroy () { + this._chart.destroy() } }) From 90d9d8752338de475d7b5ea6b09e7725425b63a2 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 19 Aug 2016 21:35:10 +0200 Subject: [PATCH 2/2] correct hook name. --- src/BaseCharts/Bar.js | 2 +- src/BaseCharts/Doughnut.js | 2 +- src/BaseCharts/Line.js | 2 +- src/BaseCharts/Pie.js | 2 +- src/BaseCharts/PolarArea.js | 2 +- src/BaseCharts/Radar.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js index b8c7695..33e70f4 100644 --- a/src/BaseCharts/Bar.js +++ b/src/BaseCharts/Bar.js @@ -55,7 +55,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } }) diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js index 533b0fd..ab4d087 100644 --- a/src/BaseCharts/Doughnut.js +++ b/src/BaseCharts/Doughnut.js @@ -38,7 +38,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } }) diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js index 174b2ef..c45b24f 100644 --- a/src/BaseCharts/Line.js +++ b/src/BaseCharts/Line.js @@ -53,7 +53,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } }) diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js index bb31b2a..9941cc1 100644 --- a/src/BaseCharts/Pie.js +++ b/src/BaseCharts/Pie.js @@ -38,7 +38,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } }) diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js index dafece2..a51197a 100644 --- a/src/BaseCharts/PolarArea.js +++ b/src/BaseCharts/PolarArea.js @@ -38,7 +38,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } }) diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js index 2232527..f446477 100644 --- a/src/BaseCharts/Radar.js +++ b/src/BaseCharts/Radar.js @@ -38,7 +38,7 @@ export default Vue.extend({ this._chart.generateLegend() } }, - destroy () { + beforeDestroy () { this._chart.destroy() } })