1

Estoy tratando de crear una gráfica con Google Charts, con la librería de Vue, pero no sé como hacer añadirla al div.

Esto es lo que he intentado hasta ahora, así es como se añade en vainilla (ejemplo aquí), pero lo intenté adaptar a Vue:

google.charts.load('current', {'packages': ['corechart']});

Vue.component('line-char', {
    data: function(){
        // Create the data table.
        var data = google.visualization.arrayToDataTable([
            ['Tiempo', 'Temperatura'],
            [1,  1000],
            [2,  1170],
            [3,  660],
            [4,  1030]
        ]);

        // Set chart options
        var options = {
            'title': 'Data Line',
            'width': '100%',
            'height': 250,
            legend: { position: 'bottom' }
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    },
    template: '<div v-model="chart_div"></div>'
});

html:

<div id="component">
    <line-chart></line-chart>
</div>
2
  • dos dudas. - Qué renderiza actualmente el componente? - No recuerdo bien como se definía la estructura de data, pero en la versión más reciente es data: function() { return { data: value } }
    – jotade
    Commented el 24 jun. 2020 a las 22:49
  • @jotade un gráfico, acabo de poner un enlace con el código de ejemplo de la documentación . Yo lo que quiero rentornar un elemento hijo al DOM. Eso solo que no sé como implementarlo con Vue.
    – DrakoPD
    Commented el 24 jun. 2020 a las 23:09

1 respuesta 1

1

he realizado la pregunta en Stackoverflow en inglés y ahí recibí una respuesta.

La respondio el usuario Phil.

Lo que deberías usar sería ref para tu <div> y luego usar el callback para hacer la gráfica en el mounted de tu componente.

// Carga la libraría de google
google.charts.load('current', {'packages':['corechart']})

const lineChartOptions = {
  title: 'Data Line',
  width: '100%',
  height: 250,
  legend: { position: 'bottom' }
}

Vue.component('LineChart', {
  template: `<div ref="chart"></div>`, // 👈 Pon tu refs aquí
  data: () => ({
    headings: ['Tiempo', 'Temperatura'],
    chartData: [
      [1,  1000],
      [2,  1170],
      [3,  660],
      [4,  1030]
    ]
  }),
  methods: {
    drawChart () {
      const dataTable = google.visualization.arrayToDataTable([
        this.headings,
        ...this.chartData
      ], false) // 👈 No olvides poner "false" aquí para indicar la primera fila como labels

      const chart = new google.visualization.LineChart(this.$refs.chart) // 👈 usa tu ref aquí
      chart.draw(dataTable, lineChartOptions)
    }
  }
  mounted () {
    // llama al callback aquí
    google.charts.setOnLoadCallback(() => this.drawChart())    
  }
})

Como mencionó Matt, si el template de tu componente está realmente vacío solo para un <div>, puedes usar la propiedad $el para montar la grafica sin usar un refs.

Vue.component('LineChart', {
  template: `<div></div>`,
  // ...
  methods: {
    drawChart () {
      // ...
      const chart = new google.visualization.LineChart(this.$el)
      chart.draw(this.dataTable, options)
    }
  }
})

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.