diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js new file mode 100644 index 0000000..ce35752 --- /dev/null +++ b/src/BaseCharts/Bubble.js @@ -0,0 +1,64 @@ +import Vue from 'vue' +import Chart from 'chart.js' +import { mergeOptions } from '../helpers/options' + +export default Vue.extend({ + template: ` +
+ +
+ `, + + 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() + } +}) diff --git a/src/examples/App.vue b/src/examples/App.vue index 73adf07..0317410 100644 --- a/src/examples/App.vue +++ b/src/examples/App.vue @@ -10,15 +10,16 @@ diff --git a/src/examples/BubbleExample.js b/src/examples/BubbleExample.js new file mode 100644 index 0000000..06a0311 --- /dev/null +++ b/src/examples/BubbleExample.js @@ -0,0 +1,52 @@ +import BubbleChart from '../BaseCharts/Bubble' + +export default BubbleChart.extend({ + mounted () { + this.renderChart({ + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [ + { + x: 20, + y: 25, + r: 5 + }, + { + x: 40, + y: 10, + r: 10 + }, + { + x: 30, + y: 22, + r: 30 + } + ] + }, + { + label: 'Data Two', + backgroundColor: '#7C8CF8', + data: [ + { + x: 10, + y: 30, + r: 15 + }, + { + x: 20, + y: 20, + r: 10 + }, + { + x: 15, + y: 8, + r: 30 + } + ] + } + ] + }) + } +}) diff --git a/src/index.js b/src/index.js index edf86a9..7740349 100644 --- a/src/index.js +++ b/src/index.js @@ -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