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 PolarArea from './BaseCharts/PolarArea'
|
||||
import Radar from './BaseCharts/Radar'
|
||||
import Bubble from './BaseCharts/Bubble'
|
||||
|
||||
const VueCharts = {
|
||||
Bar,
|
||||
@@ -11,7 +12,8 @@ const VueCharts = {
|
||||
Line,
|
||||
Pie,
|
||||
PolarArea,
|
||||
Radar
|
||||
Radar,
|
||||
Bubble
|
||||
}
|
||||
|
||||
module.exports = VueCharts
|
||||
|
||||
Reference in New Issue
Block a user