mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-11 18:11:05 +03:30
111 lines
2.3 KiB
Markdown
111 lines
2.3 KiB
Markdown
vue-chartist
|
|
==============
|
|
|
|
Plugin [Vuejs](http://vuejs.org/) for [Chartist.js](https://gionkunz.github.io/chartist-js)
|
|
|
|
## Install
|
|
|
|
```
|
|
npm install vue-chartist
|
|
```
|
|
|
|
## Setup
|
|
|
|
__This package include Chartist's javascript but not the stylesheet__
|
|
```javascript
|
|
Vue.use(require('vue-chartist'))
|
|
```
|
|
|
|
## Usage
|
|
|
|
In your HTML, add `<chartist>` tag. This tag take the following attributes :
|
|
|
|
- __ratio__ - `String`
|
|
class ratio of Chartist, see values on [Chartist web site](https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get)
|
|
|
|
- __type__ - `String` (required)
|
|
chart type, possible values :
|
|
- `Line`
|
|
- `Bar`
|
|
- `Pie`
|
|
|
|
- __data__ - `Object`
|
|
data object like this
|
|
```javascript
|
|
const data = {
|
|
labels: ["A", "B", "C"],
|
|
series:[[1, 3, 2], [4, 6, 5]]
|
|
}
|
|
```
|
|
|
|
- __options__ - `Object`
|
|
options object, see defaultOptions on [API Documentation](https://gionkunz.github.io/chartist-js/api-documentation.html)
|
|
|
|
- __event-handlers__ - `Array`
|
|
a special array to use `chart.on(event, function)`
|
|
```javascript
|
|
const eventHandlers = [{
|
|
event: 'draw',
|
|
fn() {
|
|
//animation
|
|
}
|
|
}, {
|
|
//an other event hander
|
|
}]
|
|
```
|
|
|
|
- __responsive-options__ - `Array`
|
|
object for responsive options
|
|
|
|
## Example
|
|
|
|
```html
|
|
<chartist
|
|
ratio="ct-major-second"
|
|
type="Line"
|
|
:data="chartData"
|
|
:options="chartOptions" >
|
|
</chartist>
|
|
```
|
|
|
|
>*Note: think about using the [dynamic props](http://vuejs.org/guide/components.html#Dynamic_Props) of Vuejs to bind easliy your data or other.*
|
|
|
|
```javascript
|
|
new Vue({
|
|
el:'#app',
|
|
data: {
|
|
chartData: {
|
|
labels: ["A", "B", "C"],
|
|
series:[[1, 3, 2], [4, 6, 5]]
|
|
},
|
|
chartOptions: {
|
|
lineSmooth: false
|
|
}
|
|
}
|
|
})
|
|
```
|
|
|
|
## Customize chart with no data
|
|
|
|
If chart data are empty or not definied the plugin add `ct-nodata` (or a custom class, see options plugin) class and write a message on the element.
|
|
That way, you can customize your element with CSS when you have no data to display. To choose your message use the options plugin.
|
|
|
|
## Options Plugin
|
|
```javascript
|
|
Vue.use(require('vue-chartist'), {
|
|
messageNoData: "You have not enough data",
|
|
classNoData: "empty"
|
|
})
|
|
```
|
|
|
|
## Chartist instance
|
|
There is two way to access this Chartist's instance :
|
|
By `Vue` instance
|
|
```javascript
|
|
Vue.chartist
|
|
```
|
|
or in component
|
|
```javascript
|
|
this.$chartist
|
|
```
|