0

Tengo un problema con la librería de google charts de vue al realizar un ejemplo de dicha libreria me da un error el cual no he podido solventar al parecer falta algun parametro o algo que haga que me funciones el donut chart.

Este seria mi ejemplo.

<template>
  <div id="app">
    <GChart type="DonutChart" :data="chartData" :options="chartOptions" />
  </div>
</template>

<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart,
  },
  data() {
    return {
      // Array will be automatically processed with visualization.arrayToDataTable function
      chartData: [
        ["Task", "Hours per Day"],
        ["Work", 11],
        ["Eat", 2],
        ["Commute", 2],
        ["Watch TV", 2],
        ["Sleep", 7],
      ],
      chartOptions: {
        chart: {
          title: "Company Performance",
          subtitle: "Sales, Expenses, and Profit: 2014-2017",
        },
      },
    };
  },
};
</script>

El detalle es que con dunut chart no funciona y me da el siguiente error:

Uncaught (in promise) TypeError: google.visualization[type] is not a constructor
    at createChart (app.js?1126288863:197256)
    at VueComponent.createChartObject (app.js?1126288863:197256)
    at app.js?1126288863:197256

1 respuesta 1

0

Una solución simple es cambiar "DonutChart" por "PieChart":

<template>
<div id="app">
    <GChart type="PieChart" :data="chartData" :options="chartOptions" />
  </div>
</template>

Ver la documentación oficial aquí: Making a Donut Chart

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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