有没有人知道或者知道如何在qwik中实现chart.js,而不必用react和@qwikify来转换它?我需要实现一个组件,有一个甜甜圈chart.js内置在它,不幸的是,我不能弄清楚如何使它工作,主要是因为我还没有找到一个替代document.getElementByID的ctx值。
mzmfm0qo1#
可以使用useSignal$和useVisibleTask$获取上下文。仅举一例...
import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'; import { Chart, registerables } from 'chart.js'; export default component$(() => { const myChart = useSignal<HTMLCanvasElement>(); useVisibleTask$(() => { if (myChart?.value) { Chart.register(...registerables); new Chart(myChart.value, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); } }); return ( <div> <canvas ref={myChart} id="myChart"></canvas> </div> ); });
1条答案
按热度按时间mzmfm0qo1#
可以使用useSignal$和useVisibleTask$获取上下文。仅举一例...