mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
1be5149bde
* next: 📝 Update CHANGELOG 💎 Release new version 2.1.0 ✨ Add travis config 🐛 Fix tests ✨ Add chartId as prop and fix width and height props ✨ Add bubble-chart example ✅ Add tests ✨ Add chart type Bubble Move examples into src for better testing 📝 Update README 💎 Release new version 2.0.0-alpha Add vue 2.0 build files 📝 Update README ⬆️ Update dependency chartjs to 2.2.1 Update examples ⬆️ Update dependency vue 2.0 Change deprecated v-el to ref Change render() method name to renderChart # Conflicts: # CHANGELOG.md # dist/vue-chartjs.js # dist/vue-chartjs.js.map # package.json # src/BaseCharts/Bar.js # src/BaseCharts/Bubble.js # src/BaseCharts/Doughnut.js # src/BaseCharts/Line.js # src/BaseCharts/Pie.js # src/BaseCharts/PolarArea.js # src/BaseCharts/Radar.js # src/examples/App.vue # src/examples/BubbleExample.js # test/unit/specs/Bar.spec.js # test/unit/specs/Bubble.spec.js # test/unit/specs/Doughnut.spec.js # test/unit/specs/Line.spec.js # test/unit/specs/Pie.spec.js # test/unit/specs/PolarArea.spec.js # test/unit/specs/Radar.spec.js
151 lines
3.3 KiB
Markdown
151 lines
3.3 KiB
Markdown
# Vue-ChartJs
|
|
|
|
[](https://badge.fury.io/js/vue-chartjs)  [](https://codecov.io/gh/apertureless/vue-chartjs) [](https://travis-ci.org/apertureless/vue-chartjs)
|
|
|
|
> VueJS wrapper for ChartJs
|
|
|
|
# 🚧 VUE 2.0 WIP ⚠
|
|
|
|
## Install
|
|
|
|
Simply run `npm install vue-chartjs@next`
|
|
|
|
## 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 can import the whole package or each module individual.
|
|
|
|
```javascript
|
|
import VueCharts from 'vue-chartjs'
|
|
import { Bar, Line } from 'vue-chartjs'
|
|
```
|
|
|
|
Just create your own component.
|
|
|
|
```javascript
|
|
// CommitChart.js
|
|
import { Bar } from 'vue-chartjs'
|
|
|
|
export default BarChart.extend({
|
|
mounted () {
|
|
// Overwriting base render method with actual data.
|
|
this.renderChart({
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
|
datasets: [
|
|
{
|
|
label: 'GitHub Commits',
|
|
backgroundColor: '#f87979',
|
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
|
}
|
|
]
|
|
})
|
|
}
|
|
})
|
|
```
|
|
|
|
Then simply import and use your own extended component and use it like a normal vue component
|
|
|
|
```javascript
|
|
import CommitChart from 'path/to/component/CommitChart'
|
|
```
|
|
|
|
## Another Example with options
|
|
|
|
You can overwrite the default chart options. Just pass the options object as a second paramenter to the render method
|
|
|
|
```javascript
|
|
// MonthlyIncome.js
|
|
import { Line } from 'vue-chartjs'
|
|
|
|
export default LineChart.extend({
|
|
props: [data, options],
|
|
mounted () {
|
|
this.renderChart(this.data, this.options)
|
|
}
|
|
})
|
|
```
|
|
|
|
Use it in your vue app
|
|
|
|
```javascript
|
|
import MonthlyIncome from 'path/to/component/MonthlyIncome'
|
|
|
|
<template>
|
|
<monthly-income :data={....} />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: { MonthlyIncome },
|
|
....
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## Available Charts
|
|
|
|
### Bar Chart
|
|
|
|
|
|
|
|
### Line Chart
|
|
|
|
|
|
|
|
### Doughnut
|
|
|
|
|
|
|
|
### Pie
|
|
|
|
|
|
|
|
### Radar
|
|
|
|
|
|
|
|
### Polar Area
|
|
|
|
|
|
|
|
### Bubble
|
|
|
|
|
|
|
|
## Build Setup
|
|
|
|
``` bash
|
|
# install dependencies
|
|
npm install
|
|
|
|
# serve with hot reload at localhost:8080
|
|
npm run dev
|
|
|
|
# build for production with minification
|
|
npm run build
|
|
|
|
# run unit tests
|
|
npm run unit
|
|
|
|
# run e2e tests
|
|
npm run e2e
|
|
|
|
# run all tests
|
|
npm test
|
|
```
|
|
|
|
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
|
|
|
## Contributing
|
|
|
|
1. Fork it ( https://github.com/apertureless/vue-chartjs/fork )
|
|
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
3. Commit your changes (`git commit -am 'Add some feature'`)
|
|
4. Push to the branch (`git push origin my-new-feature`)
|
|
5. Create a new Pull Request
|
|
|
|
## License
|
|
|
|
This software is distributed under [MIT license](LICENSE.txt).
|