diff --git a/README.md b/README.md index 4ff28baa..f7c4fbc8 100644 --- a/README.md +++ b/README.md @@ -82,13 +82,17 @@ export default { ![Doughnut](src/assets/doughnut.png) +### Pie + +![Pie](src/assets/pie.png) + ## Todo - [x] Implement Bar Chart - [x] Implement Line Chart - [ ] Implement Radar Chart - [ ] Implement Polar Area Chart -- [ ] Implement Pie 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 45e7a0dc..929db0a6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ + @@ -10,9 +11,10 @@ import BarExample from './examples/BarExample' import LineExample from './examples/LineExample' import DoughnutExample from './examples/DoughnutExample' + import PieExample from './examples/PieExample' export default { - components: { BarExample, LineExample, DoughnutExample } + components: { BarExample, LineExample, DoughnutExample, PieExample } } diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js index e69de29b..4eb89af5 100644 --- a/src/BaseCharts/Pie.js +++ b/src/BaseCharts/Pie.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: 'pie', + data: data, + options: options + } + ) + chart.generateLegend() + } + } +}) diff --git a/src/assets/pie.png b/src/assets/pie.png new file mode 100644 index 00000000..b70ba62a Binary files /dev/null and b/src/assets/pie.png differ diff --git a/src/examples/PieExample.js b/src/examples/PieExample.js new file mode 100644 index 00000000..341334d3 --- /dev/null +++ b/src/examples/PieExample.js @@ -0,0 +1,20 @@ +import PieChart from '../BaseCharts/Pie' + +export default PieChart.extend({ + ready () { + this.render({ + labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], + datasets: [ + { + backgroundColor: [ + '#41B883', + '#E46651', + '#00D8FF', + '#DD1B16' + ], + data: [40, 20, 80, 10] + } + ] + }) + } +})