mirror of
				https://github.com/KevinMidboe/vue-chartjs.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	save chart instance on vm instance and add destroy() hooks to properly destroy chart when component is destroyed.
This commit is contained in:
		| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
| @@ -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() | ||||
|   } | ||||
| }) | ||||
|   | ||||
		Reference in New Issue
	
	Block a user