diff --git a/README.md b/README.md index f7c4fbc8..e3c4d547 100644 --- a/README.md +++ b/README.md @@ -86,14 +86,18 @@ export default { ![Pie](src/assets/pie.png) +### Radar + +![Pie](src/assets/radar.png) + ## Todo -- [x] Implement Bar Chart -- [x] Implement Line Chart -- [ ] Implement Radar Chart +- [x] ~~Implement Bar Chart~~ +- [x] ~~Implement Line Chart~~ +- [x] ~~Implement Radar Chart~~ - [ ] Implement Polar Area Chart -- [x] Implement Pie Chart -- [x] Implement Doughnut Chart +- [x] ~~Implement Pie Chart~~ +- [x] ~~Implement Doughnut Chart~~ - [ ] Make npm module - [ ] Add tests diff --git a/src/App.vue b/src/App.vue index 929db0a6..f9850d2b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@ + @@ -12,9 +13,10 @@ import LineExample from './examples/LineExample' import DoughnutExample from './examples/DoughnutExample' import PieExample from './examples/PieExample' + import RadarExample from './examples/RadarExample' export default { - components: { BarExample, LineExample, DoughnutExample, PieExample } + components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample } } diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js index e69de29b..a5f5eaf1 100644 --- a/src/BaseCharts/Radar.js +++ b/src/BaseCharts/Radar.js @@ -0,0 +1,41 @@ +import Vue from 'vue' +import Chart from 'chart.js' + +export default Vue.extend({ + template: ` +
+ +
+ `, + + props: { + width: { + default: 400, + type: Number + }, + height: { + default: 400, + type: Number + } + }, + + data () { + return { + options: { + } + } + }, + + methods: { + render (data, options = this.options) { + const chart = new Chart( + this.$els.canvas.getContext('2d'), { + type: 'radar', + data: data, + options: options + } + ) + chart.generateLegend() + } + } +}) diff --git a/src/assets/radar.png b/src/assets/radar.png new file mode 100644 index 00000000..9c427f1c Binary files /dev/null and b/src/assets/radar.png differ diff --git a/src/examples/RadarExample.js b/src/examples/RadarExample.js new file mode 100644 index 00000000..ceba4034 --- /dev/null +++ b/src/examples/RadarExample.js @@ -0,0 +1,31 @@ +import RadarChart from '../BaseCharts/Radar' + +export default RadarChart.extend({ + ready () { + this.render({ + labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + borderColor: 'rgba(179,181,198,1)', + pointBackgroundColor: 'rgba(179,181,198,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(179,181,198,1)', + data: [65, 59, 90, 81, 56, 55, 40] + }, + { + label: 'My Second dataset', + backgroundColor: 'rgba(255,99,132,0.2)', + borderColor: 'rgba(255,99,132,1)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100] + } + ] + }) + } +})