Added bubble chart type

This commit is contained in:
Juan Carlos Alonso
2016-09-07 22:50:18 +01:00
parent 9bf6e6078d
commit 3785e73b43
2 changed files with 54 additions and 1 deletions

51
src/BaseCharts/Bubble.js Normal file
View 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()
}
})

View File

@@ -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