Add chart type Bubble

This commit is contained in:
Jakub Juszczak
2016-09-23 12:59:00 +02:00
parent d7003306d1
commit d6c3f50ba8
4 changed files with 127 additions and 8 deletions

64
src/BaseCharts/Bubble.js Normal file
View File

@@ -0,0 +1,64 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
<div>
<canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
</div>
`,
props: {
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
}
},
data () {
return {
defaultOptions: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [ {
gridLines: {
display: false
},
categoryPercentage: 0.5,
barPercentage: 0.2
}]
}
}
}
},
methods: {
renderChart (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'bubble',
data: data,
options: chartOptions
}
)
this._chart.generateLegend()
}
},
beforeDestroy () {
this._chart.destroy()
}
})