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

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.