Mi problema: seguí el documento de vue-chartjs pero el gráfico no muestra los datos.
Aquí está mi código:
Mi componente Chart.vue
<script> import { Line } from 'vue3-chart-v2' export default { extends: Line, props: { chartdata: { type: Object, default: null }, options: { type: Object, default: null } }, mounted () { this.renderChart(this.chartdata, this.options) } } </script>Mi código Home.vue:
<template> <div class="container"> <line-chart v-if="loaded" :chartdata="chartdata" :options="options"/> </div> </template> <script> import LineChart from '../components/Chart.vue' export default { name: 'LineChartContainer', components: { LineChart }, data: () => ({ loaded: false, chartdata: null, options: { responsive: true, } }), async mounted () { this.loaded = false try { const quotes = [ 1, 2, 3, 4, ] this.chartdata = quotes this.loaded = true } catch (e) { console.error(e) } } } </script>Cuando renderizo la vista de Inicio, veo el eje del gráfico, pero no hay datos dentro... En la consola, no tengo ningún error.
Más tarde, me gustaría obtener datos de una API. Así, las cotizaciones recibirían datos de una API externa. Aquí solo pongo algunos datos falsos para probar.
¿Alguien puede ayudarme? gracias
Me faltaba la import { defineComponent } from 'vue' en mi componente. Ahora funciona usando el siguiente código.
<template> <div class="container"> <line-chart v-if="loaded" :chartdata="chartdata" :options="options"/> </div> </template> <script> import LineChart from '../components/Chart.vue' import { defineComponent } from 'vue' export default defineComponent({ name: 'LineChartContainer', components: { LineChart }, data: () => ({ loaded: false, chartdata: null, options: { responsive: true, } }), async mounted () { this.loaded = false try { const quotes = [ 1, 2, 3, 4, ] this.chartdata = quotes this.loaded = true } catch (e) { console.error(e) } } }) </script>