Cómo agregar un gráfico a un proyecto Laravel con Vue. Vue-chartjs es un contenedor para Chart.js en vue. Puede crear fácilmente componentes de gráficos reutilizables.
Vue.js
Instalar la libreria vue-chart
npm install vue-chartjs chart.js --save
Crear un archivo LineChart.js
resources/js/components/LineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
Componentes donde va integrar gráficos
resources/js/components/graficos.vue
<template>
<div class="small">
<h4>Reportes del Venta Junio</h4>
<line-chart :chart-data="datacollection" :height="100"></line-chart>
</div>
</template>
<script>
import LineChart from './LineChart.js'
export default {
components: {
LineChart
},
data(){
return {
datacollection: null
}
},
mounted () {
this.fillData()
},
methods: {
fillData ()
{
this.datacollection = {
labels: ['Lunes','Martes','Miercoles','Jueves','Viernes', 'Sabado' , 'Domingo'],
datasets: [
{
label: 'Ventas',
backgroundColor: '#FF0066',
data: [ 20, 40, 50, 20, 50, 40]
},
]
}
}
}
}
</script>
<style lang="css">
.small {
max-width: 800px;
/* max-height: 500px; */
margin: 50px auto;
}
</style>
Crear un Componente en el resources/js/app.js
Vue.component('grafica-component', require('./components/graficos.vue').default);
Y agregar e html.
<grafica-component></grafica-component>
Fuentes
https://vue-chartjs.org/guide/#updating-charts
Great work!, your post are always helping the people. Keep up the nice job. I will be coming back more ofter
Great post but where is the Laravel part?
When some one searches for his required
thing, so he/she needs to be available that in detail,
so that thing is maintained over here.