<script lang="ts"> import { onMount } from 'svelte'; import { Chart } from 'frappe-charts'; let chartElem; const chartData = { labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am" ], datasets: [ { name: "Some Data", type: "bar", values: [25, 40, 30, 35, 8, 52, 17, -4] }, { name: "Another Set", type: "line", values: [25, 50, -10, 15, 18, 32, 27, 14] } ] }; onMount(() => { console.log(chartElem); // always undefined... why?? new Chart({ parent: chartElem, title: "My Awesome Chart", data: chartData, type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage' height: 250, colors: ['#7cd6fd', '#743ee2'] }); }); <div bind:this={chartElem}>loading chart...</div> Estaba tratando de trazar un gráfico en mi componente Svelte y arriba está mi código actual. De acuerdo con el documento Svelte, bind:this es la forma de referirse al nodo dom chartElem para que en el código del componente pueda trazar un gráfico en ese div .
Pero de alguna manera me sigo undefined con mi variable chartElem . ¿Dónde hice mal? ¿O tal vez tendría que ir a una biblioteca de gráficos diferente que no sea Frappe Chart?
Parece que la forma en que instalé el objeto Frappe Chart podría estar equivocada. Hice algunos ajustes al código original.
<script lang="ts"> import { onMount, onDestroy } from 'svelte'; import { Chart } from 'frappe-charts'; let chartElem; let chart const chartData = { labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am" ], datasets: [ { name: "Some Data", type: "bar", values: [25, 40, 30, 35, 8, 52, 17, -4] }, { name: "Another Set", type: "line", values: [25, 50, -10, 15, 18, 32, 27, 14] } ] }; onMount(() => { chart = new Chart(chartElem, { title: "My Awesome Chart", data: chartData, type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage' height: 250, colors: ['#7cd6fd', '#743ee2'] }); }); onDestroy(() => { chart = null; }); <div bind:this="{chartElem}"></div>Esto funcionó para mí.
Además, vale la pena registrar el método de ciclo de vida onDestroy para que el objeto del gráfico se pueda limpiar correctamente.