mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4f5aa1811d | ||
|
|
098c90edf1 | ||
|
|
3f15eb9abc | ||
|
|
68e94b7fe3 | ||
|
|
0d24270bf2 | ||
|
|
e034467e5b | ||
|
|
c7cb8e24e9 | ||
|
|
4c9f4fc5e5 | ||
|
|
a25d327b13 | ||
|
|
f57e555d94 | ||
|
|
88d2771175 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -4,3 +4,5 @@ npm-debug.log
|
|||||||
selenium-debug.log
|
selenium-debug.log
|
||||||
test/unit/coverage
|
test/unit/coverage
|
||||||
test/e2e/reports
|
test/e2e/reports
|
||||||
|
dist/
|
||||||
|
es/
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
Simply run `npm install vue-chartjs`
|
Simply run `npm install vue-chartjs@1.1.3`
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
|
|||||||
22
dist/vue-chartjs.js
vendored
22
dist/vue-chartjs.js
vendored
File diff suppressed because one or more lines are too long
1
dist/vue-chartjs.js.map
vendored
1
dist/vue-chartjs.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "1.1.3",
|
"version": "1.2.0",
|
||||||
"description": "Vue wrapper for chart.js",
|
"description": "Vue wrapper for chart.js",
|
||||||
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -15,6 +15,9 @@
|
|||||||
"Charts"
|
"Charts"
|
||||||
],
|
],
|
||||||
"main": "dist/vue-chartjs.js",
|
"main": "dist/vue-chartjs.js",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node build/dev-server.js",
|
"dev": "node build/dev-server.js",
|
||||||
"build": "node build/build.js",
|
"build": "node build/build.js",
|
||||||
@@ -26,7 +29,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-runtime": "^6.0.0",
|
"babel-runtime": "^6.0.0",
|
||||||
"chart.js": "^2.1.6",
|
"chart.js": "^2.6.0",
|
||||||
"vue": "^1.0.21"
|
"vue": "^1.0.21"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -63,6 +63,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -61,6 +61,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
59
src/BaseCharts/Scatter.js
Normal file
59
src/BaseCharts/Scatter.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
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: '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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -5,6 +5,7 @@ import Pie from './BaseCharts/Pie'
|
|||||||
import PolarArea from './BaseCharts/PolarArea'
|
import PolarArea from './BaseCharts/PolarArea'
|
||||||
import Radar from './BaseCharts/Radar'
|
import Radar from './BaseCharts/Radar'
|
||||||
import Bubble from './BaseCharts/Bubble'
|
import Bubble from './BaseCharts/Bubble'
|
||||||
|
import Scatter from './BaseCharts/Scatter'
|
||||||
|
|
||||||
const VueCharts = {
|
const VueCharts = {
|
||||||
Bar,
|
Bar,
|
||||||
@@ -13,7 +14,8 @@ const VueCharts = {
|
|||||||
Pie,
|
Pie,
|
||||||
PolarArea,
|
PolarArea,
|
||||||
Radar,
|
Radar,
|
||||||
Bubble
|
Bubble,
|
||||||
|
Scatter
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = VueCharts
|
module.exports = VueCharts
|
||||||
|
|||||||
Reference in New Issue
Block a user