Tutorial + Laravel + Vue – Chart

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


3 comentarios en «Tutorial + Laravel + Vue – Chart»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *