mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
did not translate the correct file...
This commit is contained in:
julien
@@ -1,51 +1,327 @@
|
||||
<div align="center">
|
||||
<img width="256" heigth="256" src="../assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||
</div>
|
||||
|
||||
[](https://badge.fury.io/js/vue-chartjs)
|
||||
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||
[](http://packagequality.com/#?package=vue-chartjs)
|
||||
[](https://www.npmjs.com/package/vue-chartjs)
|
||||
[](https://gitter.im/vue-chartjs/Lobby)
|
||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||
---
|
||||
search: fr
|
||||
---
|
||||
|
||||
# vue-chartjs
|
||||
**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
|
||||
|
||||
**vue-chartjs** est un wrapper vue pour [Chart.js](https://github.com/chartjs/Chart.js). Vous pouvez facilement créer des composants graphiques réutilisables.
|
||||
## Introduction
|
||||
`vue-chartjs` vous permet d'utiliser chart.js avec vue sans prise de tête. C'est la solution idéale pour ceux qui souhaitent créer des graphes simplement et rapidement.
|
||||
|
||||
## Demo & Docs
|
||||
|
||||
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||
|
||||
### Compatibilité
|
||||
|
||||
- v1 later `@legacy`
|
||||
- Vue.js 1.x
|
||||
- v2 later
|
||||
- Vue.js 2.x
|
||||
|
||||
Après la sortie de la version finale de vue.js 2, vous obtiendrez la version 2 par défaut lorsque vous installerez vue-chartjs avec npm.
|
||||
Plus besoin du marqueur @next désormais. Si vous souhaitez la v1, vous devrez indiquer explicitement la version, ou utiliser le marqieur legacy.
|
||||
Si vous cherchez la v1, rendez-vous sur cette [branche](https://github.com/apertureless/vue-chartjs/tree/release/1.x).
|
||||
La logique interne de chart.js est abstraite, mais l'objet sous-jacent est exposé, de sorte que vous puissiez bénéficier de la plus grande flexibilité possible.
|
||||
|
||||
## Installation
|
||||
Si vous travaillez avec Vue.js 2+, exécutez simplement :
|
||||
|
||||
Lancez simplement la commande `yarn add vue-chartjs chart.js`
|
||||
`yarn add vue-chartjs chart.js`
|
||||
|
||||
Ou si vous souhaitez l'utiliser directement dans votre navigateur, ajoutez
|
||||
Avec vue 1.x, il vous faudra utiliser le marqueur `legacy`. Notez toutefois que la version 1 de vue n'est plus maintenue à l'heure actuelle.
|
||||
|
||||
`yarn add vue-chartjs@legacy`
|
||||
|
||||
## Démarrage rapide
|
||||
|
||||
Importez l'objet graphe de base afin de l'étendre. Cette façon de faire offre beaucoup plus de flexibilité lorsque plusieurs sources de données sont utilisées.
|
||||
Il est possible d'encapsuler vos composants et d'utiliser les props pour transmettre les données, ou vous pouvez également les indiquer directement à l'intérieur du composant. Cependant, cette seconde méthode ne créera pas des composants réutilisables.
|
||||
|
||||
Vous pouvez choisir d'importer le package dans son intégralité, ou chaque composant individuellement.
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Surcharge de la méthode render avec les données.
|
||||
this.renderChart(data, options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
La méthode `renderChart()` prend deux paramètres :
|
||||
|
||||
- un objet de données
|
||||
- un objet d'options
|
||||
|
||||
### Objet de données
|
||||
|
||||
L'objet de données prend la structure suivante :
|
||||
|
||||
```javascript
|
||||
{
|
||||
labels: ['Janvier', 'Février'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Commits sur GitHub',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Pour plus d'informations, vous pouvez lire la documentation [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data).
|
||||
|
||||
## Props
|
||||
|
||||
Certains props de base sont définis dans BaseCharts. Grâce à l'héritage de l'opération `extend()`, ceux-ci peuvent être surchargés, bien qu'ils soient *invisibles*.
|
||||
|
||||
| Prop | Description |
|
||||
|---|---|
|
||||
| width | largeur du graphe |
|
||||
| height | hauteur du graphe |
|
||||
| chart-id | id du canvas |
|
||||
| css-classes | Chaîne de caractères avec les classes CSS à appliquer à l'élément div parent |
|
||||
| styles | Object avec les styles CSS à appliquer à l'élément div parent |
|
||||
|
||||
## Exemples
|
||||
|
||||
Voici quelques exemples.
|
||||
|
||||
### Graphe avec props
|
||||
|
||||
Vous pouvez créer les props data et options à transmetttre au graphe.
|
||||
|
||||
```javascript
|
||||
// LineChart.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Vous pourrez les utiliser après avoir ajouté votre composant :
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.full.min.js"></script>
|
||||
<line-chart :data="{votre objet de données}" :options="{vos options}"></line-chart>
|
||||
```
|
||||
à vos scripts. Voir sur [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||
|
||||
## Explication sur les différents builds
|
||||
Si vous souhaitez modifier la hauteur ou la largeur :
|
||||
|
||||
Il y a trois builds différents. Tout dépend
|
||||
There are three different entry points. Tout dépend de la configuration que vous utilisez. Les dépendances sont soit intégrées au build, soit requises en tant que peerDependency :
|
||||
```html
|
||||
<line-chart
|
||||
:data="{votre objet de données}"
|
||||
:options="{responsive: false, maintainAspectRatio: false}"
|
||||
:width="400"
|
||||
:height="200"
|
||||
>
|
||||
</line-chart>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
Vous devrez préciser `responsive: false` si vous souhaitez appliquer une taille fixe avec `width` et `height`.
|
||||
</p>
|
||||
|
||||
### Graphe avec données locales
|
||||
|
||||
```javascript
|
||||
import {Bar} from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
data () {
|
||||
return {
|
||||
datacollection: {
|
||||
labels: ['Janvier', 'Février'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Composants réutilisables
|
||||
|
||||
Si vous souhaitez faire en sorte que vos composants restent réutilisables, le mieux est de leur appliquer un wrapper. De cette manière, le composant graphique est seulement responsable de la représentation de la donnée, alors que le wrapper se charge de la logique derrière elle. Il y a de nombreux cas d'utilisations, et la manière de faire sera différente si vous êtes sur une Application Monopage (SPA) ou si vous intégrez sur du Laravel par exemple.
|
||||
|
||||
## Données en direct
|
||||
|
||||
Chart.js ne fournit pas de mécanisme de mise à jour automatique si jamais vous deviez modifier vos jeux de données. Cependant, `vue-chartjs` met à disposition deux mixins pour cela :
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Tous deux réalisent le même travail. La plupart du temps, c'est `reactiveProp` que vous utiliserez. Il reprend la logique de votre composant graphique, et crée automatiquement une prop `chartData` et ajoute une `vue watch` sur celle-ci. Lorsque la donnée change, `update()` sera appelée si c'est seulement le coeur de la donnée qui est modifié, et `renderChart()` si de nouveaux jeux de données ont été ajoutés.
|
||||
|
||||
`reactiveData` crée une variable locale chartData (pas une prop !), et lui ajoute un watcher.
|
||||
Le seul cas d'utilisation est celui où vous souhaitez un graphe à usage unique, et que vous effectuez des appels API à l'intérieur même du composant.
|
||||
|
||||
```javascript
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Exemple
|
||||
|
||||
**LineChart.js**
|
||||
|
||||
```javascript
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData est créé par le mixin.
|
||||
// si vous voulez transmettre des options, il faudra créer une variable locale
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**RandomChart.vue**
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div class="small">
|
||||
<line-chart :chart-data="datacollection"></line-chart>
|
||||
<button @click="fillData()">Aléatoire</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from './LineChart.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datacollection: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fillData()
|
||||
},
|
||||
methods: {
|
||||
fillData () {
|
||||
this.datacollection = {
|
||||
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}, {
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.small {
|
||||
max-width: 600px;
|
||||
margin: 150px auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
⚠ Attention : si vous permutez vos données dans un composant parent puis les transmettez à un composant enfant, gardez à l'esprit les limitations de javascript.
|
||||
Plus d'infos sur [issue#44](https://github.com/apertureless/vue-chartjs/issues/44).
|
||||
</p>
|
||||
|
||||
### Limitations
|
||||
<ul>
|
||||
<li>[Mises en garde](https://vuejs.org/v2/guide/list.html#Caveats)</li>
|
||||
<li>[Mise en garde sur la détection des modifications](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
|
||||
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
|
||||
</ul>
|
||||
|
||||
## Objet Chart.js
|
||||
|
||||
Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this._chart`.
|
||||
|
||||
## Plugins inline
|
||||
|
||||
Avec Chart.js, vous pouvez définir des pugins globaux ou inline. Les plugins globaux fonctionnent sans souci avec `vue-chartjs`, comme décrit dans la [documentation chart.js](http://www.chartjs.org/docs/latest/developers/plugins.html) described.
|
||||
|
||||
Si vous désirez ajouter des plugins inline, `vue-chartjs` expose une méthode `addPlugin()`. L'appel à cette méthode doit se faire avant celui de `renderChart()`.
|
||||
|
||||
### Exemple
|
||||
|
||||
```javascript
|
||||
mounted () {
|
||||
this.addPlugin({
|
||||
id: 'mon-plugin',
|
||||
beforeInit: function (chart) {
|
||||
....
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## Diagrammes disponibles
|
||||
|
||||
### Colonnes
|
||||
|
||||
<p class="tip">
|
||||
Il y a deux versions du diagramme colonnes : `{Bar}` et `{HorizontalBar}`
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
### Ligne
|
||||
|
||||
|
||||
|
||||
### Beignet
|
||||
|
||||
|
||||
|
||||
### Circulaire
|
||||
|
||||
|
||||
|
||||
### Radar
|
||||
|
||||
|
||||
|
||||
### Polaire
|
||||
|
||||
|
||||
|
||||
### Bulles
|
||||
|
||||
|
||||
|
||||
|
||||
### Nuages de points
|
||||
|
||||
Ce diagramme utilise une structure de données différente des autres. Pour le moment, les mixis de mise à jour de données ne fonctionnent pas avec ce type de graphique.
|
||||
|
||||
|
||||
|
||||
|
||||
## Explications sur les différents builds
|
||||
|
||||
Il y a trois builds différents. Le choix dépend de votre projet. Les dépendances sont soient intégrées, soit marquées comme peerDependency.
|
||||
|
||||
- Browser
|
||||
- Browserify / Webpack 1
|
||||
@@ -75,216 +351,12 @@ Toutefois, Vue.js et Chart.js sont des `peerDependencies`, vous devrez donc les
|
||||
|
||||
Si vous utilisez Webpack 2, `jsnext:main` / `module` sera automatiquement sélectionné. `es/index.js`est une version es __transpilée__ des sources, et n'est pas __bundlée__ à un module. Ainsi, rien ne devrait bloquer l'élimination de code mort. Comme dans la version bundlée précédente, `Vue.js` et `Chart.js` sont des `peerDependencies` et doivent être installés.
|
||||
|
||||
## Ressources
|
||||
|
||||
## Comment faire
|
||||
Voici une liste de ressources et tutoriels sur comment utiliser `vue-chartjs` :
|
||||
|
||||
Vous devez importer l'objet graphe de base et l'étendre. Cette opération permet d'offrir beaucoup plus de flexibilité lorsque plusieurs sources de données sont utilisées. Vous pouvez passer les données via props ou vue-resource.
|
||||
|
||||
Vous pouvez choisir d'importer le package dans son intégralité, ou chaque composant individuellement.
|
||||
|
||||
```javascript
|
||||
import VueCharts from 'vue-chartjs'
|
||||
import { Bar, Line } from 'vue-chartjs'
|
||||
```
|
||||
|
||||
Créez simplement votre composant.
|
||||
|
||||
```javascript
|
||||
// GraphiqueCommits.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Surcharge de la méthode render avec les données.
|
||||
this.renderChart({
|
||||
labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Commits GitHub',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Il ne vous reste qu'à importer et utiliser votre propre composant comme un composant vue classique.
|
||||
|
||||
```javascript
|
||||
import GraphiqueCommits from 'chemin/vers/composant/GraphiqueCommits'
|
||||
```
|
||||
|
||||
## Autre exemple avec options
|
||||
|
||||
Vous pouvez surcharger les options par défaut du graphique. Indiquez simplement un objet options en tant que second paramètre de la méthode render.
|
||||
|
||||
```javascript
|
||||
// RevenuMensuel.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Utilisez-le dans votre application Vue :
|
||||
|
||||
```javascript
|
||||
import RevenuMensuel from 'chemin/vers/composant/RevenuMensuel'
|
||||
|
||||
<template>
|
||||
<revenu-mensuel :data={....} />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: { RevenuMensuel },
|
||||
....
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Mises à jour des données
|
||||
|
||||
Chart.js ne donne pas de mécanisme de mise à jour automatique si jamais vous deviez modifier vos jeux de données. Vous pouvez cependant implémenter le mécanisme facilement à l'aide de l'un de deux mixins inclus :
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Tous deux sont inclus dans le module `mixins`.
|
||||
|
||||
Ces mixins crée automatiquement `chartData` en tant que prop ou donnée, ainsi qu'un watcher. Si la donnée est modifiée, le graphique sera actualisé.
|
||||
Veuillez cependant garder à l'esprit les limitations de vue et de javascript sur les propriétés de mutabilité des tableaux et objets. Plus d'infos [ici](http://vue-chartjs.org/#/home?id=reactive-data).
|
||||
|
||||
```javascript
|
||||
// RevenuMensuel.js
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
### Module Mixins
|
||||
Le module `mixins` est inclu dans le module`VueCharts` et tant que module séparé.
|
||||
Différentes manières de les importer :
|
||||
|
||||
```javascript
|
||||
// Importe le module en entier avec tous les diagrammes
|
||||
import VueCharts from 'vue-chartjs'
|
||||
|
||||
export default VueCharts.Line.extend({
|
||||
mixins: [VueCharts.mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Importe les modules individuellement
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Importe les modules individuellement, avec assignation
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Diagrammes disponibles
|
||||
|
||||
### Colonnes
|
||||
|
||||
|
||||
|
||||
### Ligne
|
||||
|
||||
|
||||
|
||||
### Beignet
|
||||
|
||||
|
||||
|
||||
### Circulaire
|
||||
|
||||
|
||||
|
||||
### Radar
|
||||
|
||||
|
||||
|
||||
### Polaire
|
||||
|
||||
|
||||
|
||||
### Bulles
|
||||
|
||||
|
||||
|
||||
### Nuages de points
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
``` bash
|
||||
# installation des dépendances
|
||||
npm install
|
||||
|
||||
# sert sur localhost:8080 avec rechargement auto
|
||||
npm run dev
|
||||
|
||||
# build production avec compression
|
||||
npm run build
|
||||
|
||||
# exécution des tests unitaires
|
||||
npm run unit
|
||||
|
||||
# exécution des tests e2e
|
||||
npm run e2e
|
||||
|
||||
# exécution de tous les tests
|
||||
npm test
|
||||
```
|
||||
|
||||
Pour une explication détaillée du fonctionnement, vous pouvez lire le [guide](http://vuejs-templates.github.io/webpack/) ainsi que la [documentation pour vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
||||
## Contribution
|
||||
|
||||
1. Forkez ( https://github.com/apertureless/vue-chartjs/fork )
|
||||
2. Créez la branche pour votre fonctionnalité (`git checkout -b my-new-feature`)
|
||||
3. Commitez vos modifications (`git commit -am 'Add some feature'`)
|
||||
4. Pushez sur la branche (`git push origin my-new-feature`)
|
||||
5. Créez une nouvelle Pull Request
|
||||
|
||||
## Licence
|
||||
|
||||
Ce logiciel est distribué sous [licence MIT](LICENSE.txt).
|
||||
- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
|
||||
- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
|
||||
- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
|
||||
- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
|
||||
- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)
|
||||
|
||||
Reference in New Issue
Block a user