mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
16
README.md
16
README.md
@@ -2,15 +2,25 @@
|
|||||||
|
|
||||||
> VueJS wrapper for ChartJs
|
> VueJS wrapper for ChartJs
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
Simply run `npm install vue-chartjs`
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource.
|
You need to import the base chart class and extend it. This gives much more flexibility when working with different data. You can pass the data over props or vue-resource.
|
||||||
|
|
||||||
|
You can import the whole package or each module individual.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import VueCharts from 'vue-chartjs'
|
||||||
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
Just create your own component.
|
Just create your own component.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// CommitChart.js
|
// CommitChart.js
|
||||||
import BarChart from '../BaseCharts/Bar'
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
export default BarChart.extend({
|
export default BarChart.extend({
|
||||||
ready () {
|
ready () {
|
||||||
@@ -41,7 +51,7 @@ You can overwrite the default chart options. Just pass the options object as a s
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// MonthlyIncome.js
|
// MonthlyIncome.js
|
||||||
import LineChart from '../BaseCharts/Line'
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
export default LineChart.extend({
|
export default LineChart.extend({
|
||||||
props: [data, options],
|
props: [data, options],
|
||||||
@@ -102,7 +112,7 @@ export default {
|
|||||||
- [x] ~~Implement Polar Area Chart~~
|
- [x] ~~Implement Polar Area Chart~~
|
||||||
- [x] ~~Implement Pie Chart~~
|
- [x] ~~Implement Pie Chart~~
|
||||||
- [x] ~~Implement Doughnut Chart~~
|
- [x] ~~Implement Doughnut Chart~~
|
||||||
- [ ] Make npm module
|
- [x] ~~Make npm module~~
|
||||||
- [ ] Add tests
|
- [ ] Add tests
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user