Add scatter chart

This commit is contained in:
Jakub Juszczak
2017-07-02 16:40:38 +02:00
parent 80799b7bd5
commit d304a2c5ab
3 changed files with 127 additions and 1 deletions

69
src/BaseCharts/Scatter.js Normal file
View File

@@ -0,0 +1,69 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
render: function (createElement) {
return createElement(
'div',
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
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: {
renderChart (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'scatter',
data: data,
options: chartOptions
}
)
this._chart.generateLegend()
}
},
beforeDestroy () {
this._chart.destroy()
}
})