diff --git a/README.md b/README.md index e3c4d54..5b65028 100644 --- a/README.md +++ b/README.md @@ -90,12 +90,16 @@ export default { ![Pie](src/assets/radar.png) +### Polar Area + +![Pie](src/assets/polar.png) + ## Todo - [x] ~~Implement Bar Chart~~ - [x] ~~Implement Line Chart~~ - [x] ~~Implement Radar Chart~~ -- [ ] Implement Polar Area Chart +- [x] ~~Implement Polar Area Chart~~ - [x] ~~Implement Pie Chart~~ - [x] ~~Implement Doughnut Chart~~ - [ ] Make npm module diff --git a/src/App.vue b/src/App.vue index f9850d2..73adf07 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,6 +5,7 @@ + @@ -14,9 +15,10 @@ import DoughnutExample from './examples/DoughnutExample' import PieExample from './examples/PieExample' import RadarExample from './examples/RadarExample' + import PolarAreaExample from './examples/PolarAreaExample' export default { - components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample } + components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample } } diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js new file mode 100644 index 0000000..1c5f8bf --- /dev/null +++ b/src/BaseCharts/PolarArea.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: 'polarArea', + data: data, + options: options + } + ) + chart.generateLegend() + } + } +}) diff --git a/src/assets/polar.png b/src/assets/polar.png new file mode 100644 index 0000000..e3f99a5 Binary files /dev/null and b/src/assets/polar.png differ diff --git a/src/examples/PolarAreaExample.js b/src/examples/PolarAreaExample.js new file mode 100644 index 0000000..2196ddb --- /dev/null +++ b/src/examples/PolarAreaExample.js @@ -0,0 +1,29 @@ +import PolarAreaChart from '../BaseCharts/PolarArea' + +export default PolarAreaChart.extend({ + ready () { + this.render({ + labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + 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)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100] + } + ] + }) + } +})