diff --git a/src/BaseCharts/Scatter.js b/src/BaseCharts/Scatter.js new file mode 100644 index 0000000..d9a172c --- /dev/null +++ b/src/BaseCharts/Scatter.js @@ -0,0 +1,59 @@ +import Vue from 'vue' +import Chart from 'chart.js' +import { mergeOptions } from '../helpers/options' + +export default Vue.extend({ + template: ` +
+ +
+ `, + + props: { + chartId: { + default: 'scatter-chart', + type: String + }, + width: { + default: 400, + type: Number + }, + height: { + default: 400, + type: Number + } + }, + + data () { + return { + defaultOptions: { + scales: { + xAxes: [{ + type: 'linear', + position: 'bottom' + }] + } + } + } + }, + + methods: { + render (data, options) { + let chartOptions = mergeOptions(this.defaultOptions, options) + + this._chart = new Chart( + this.$els.canvas.getContext('2d'), { + type: 'scatter', + data: data, + options: chartOptions + } + ) + this._chart.generateLegend() + } + }, + beforeDestroy () { + if (this._chart) { + this._chart.destroy() + } + } +}) diff --git a/src/index.js b/src/index.js index 7740349..af0be1f 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import Pie from './BaseCharts/Pie' import PolarArea from './BaseCharts/PolarArea' import Radar from './BaseCharts/Radar' import Bubble from './BaseCharts/Bubble' +import Scatter from './BaseCharts/Scatter' const VueCharts = { Bar, @@ -13,7 +14,8 @@ const VueCharts = { Pie, PolarArea, Radar, - Bubble + Bubble, + Scatter } module.exports = VueCharts