mirror of
				https://github.com/KevinMidboe/vue-chartjs.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	Added bubble chart type
This commit is contained in:
		
							
								
								
									
										51
									
								
								src/BaseCharts/Bubble.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										51
									
								
								src/BaseCharts/Bubble.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,51 @@ | |||||||
|  | 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}} v-el:canvas></canvas> | ||||||
|  |     </div> | ||||||
|  |   `, | ||||||
|  |  | ||||||
|  |   props: { | ||||||
|  |     chartId: { | ||||||
|  |       default: 'bubble-chart', | ||||||
|  |       type: String | ||||||
|  |     }, | ||||||
|  |     width: { | ||||||
|  |       default: 400, | ||||||
|  |       type: Number | ||||||
|  |     }, | ||||||
|  |     height: { | ||||||
|  |       default: 400, | ||||||
|  |       type: Number | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |  | ||||||
|  |   data () { | ||||||
|  |     return { | ||||||
|  |       defaultOptions: { | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |  | ||||||
|  |   methods: { | ||||||
|  |     render (data, options) { | ||||||
|  |       let chartOptions = mergeOptions(this.defaultOptions, options) | ||||||
|  |  | ||||||
|  |       this._chart = new Chart( | ||||||
|  |         this.$els.canvas.getContext('2d'), { | ||||||
|  |           type: 'bubble', | ||||||
|  |           data: data, | ||||||
|  |           options: chartOptions | ||||||
|  |         } | ||||||
|  |       ) | ||||||
|  |       this._chart.generateLegend() | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|  |   beforeDestroy () { | ||||||
|  |     this._chart.destroy() | ||||||
|  |   } | ||||||
|  | }) | ||||||
| @@ -4,6 +4,7 @@ import Line from './BaseCharts/Line' | |||||||
| import Pie from './BaseCharts/Pie' | import Pie from './BaseCharts/Pie' | ||||||
| import PolarArea from './BaseCharts/PolarArea' | import PolarArea from './BaseCharts/PolarArea' | ||||||
| import Radar from './BaseCharts/Radar' | import Radar from './BaseCharts/Radar' | ||||||
|  | import Bubble from './BaseCharts/Bubble' | ||||||
|  |  | ||||||
| const VueCharts = { | const VueCharts = { | ||||||
|   Bar, |   Bar, | ||||||
| @@ -11,7 +12,8 @@ const VueCharts = { | |||||||
|   Line, |   Line, | ||||||
|   Pie, |   Pie, | ||||||
|   PolarArea, |   PolarArea, | ||||||
|   Radar |   Radar, | ||||||
|  |   Bubble | ||||||
| } | } | ||||||
|  |  | ||||||
| module.exports = VueCharts | module.exports = VueCharts | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user