Chart.js与QWIK集成

arknldoa  于 2023-03-18  发布在  Chart.js
关注(0)|答案(1)|浏览(126)

有没有人知道或者知道如何在qwik中实现chart.js,而不必用react和@qwikify来转换它?
我需要实现一个组件,有一个甜甜圈chart.js内置在它,不幸的是,我不能弄清楚如何使它工作,主要是因为我还没有找到一个替代document.getElementByID的ctx值。

mzmfm0qo

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>
  );
});

相关问题