如何为库传递DOM元素(例如。ChartJS，高级图表)在虚拟王国(如Qwik)？

Question

背景

我个人在过去曾广泛使用过React，Vue和角。很多时候，我需要用从选择性数据中生成的图表来创建应用程序。由于Qwik对速度的承诺，我最近正在试用它，并尝试使用ChartJs在其中创建图表。但是，尽管ChartJs为React、Vue、Angular、Svelte等提供了单独的库，但它没有一个用于Qwik的库，这是可以理解的。

问题

许多插件，如、High曲线图、和ChartJs，通常都需要将DOM元素发送到其函数中，以确定在何处呈现它们的输出。但是，当我们处理虚拟王国时，我无法运行JS选择器脚本来获取DOM元素并将它们传递到组件中的函数中。因此，到目前为止，我还不能在我的Qwik项目中使用ChartJs。

尝试

我只是寻求解决这个问题的办法，没有找到任何可行的办法。在ChartJs文档中，以下代码是它们实现图表的原始JS方式：

new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );

正如预期的那样，document.getElementById在组件中不工作，这就是我陷入困境的地方。我只创建了useMount$()函数，我希望在其中放置生成图表的逻辑，并通过使用引用或其他不使用的方法来查找 function 解决方案。但是，除此之外，我一直找不到更多的东西。

我知道，查看React库的ChartJs将为我提供线索，但当我研究一个库(在当前级别上我发现这个库很困难)时，我希望从Stack溢出社区获得一个指向解决方案的指针。

在Qwik文档上搜索"ref“不会返回任何搜索结果，但我在网上找到了另一个开发人员的git项目，并试图复制使用他的方法中的引用：

子组件代码：

import { component$, useMount$, Ref, useStylesScoped$ } from "@builder.io/qwik";
import { Chart } from 'chart.js/auto';

interface GraphProps {
  data: object[];
  reference: Ref<Element>;
}

export default component$((props: GraphProps) => {
  useStylesScoped$(styles);

  useMount$(() => {
    new Chart(
      props.reference.value,
      {
        <... options here ...>
      }
    );
  });

  return (
    <div id="chartContent">
    </div>
  );
});

父组件代码：

import { component$, useRef } from "@builder.io/qwik";
import ContentCard from "../components/contentCard/contentCard";
import ChartJSGraph from "../components/chartJSGraph/chartJSGraph";
...

export default component$(() => {
  const leftChartContainer = useRef();

  return (
    <div>
        <div className="row">
            <ContentCard>
                <div className="graph-container">
                    <ChartJSGraph
                        data={[
                        { year: 2010, count: 10 },
                        ...
                        ]}
                        reference={leftChartContainer}
                    />
                </div>
            </ContentCard>
        </div>
    </div>
  )
});

因为这些只是YouTuber代码的发现，所以它可能已经过时了，所以不一定是可靠的来源。但到目前为止，搜索官方文档还没有让我找到任何官方的参考方法。

Answer 1

传递给图表库的DOM元素只能在挂载到页面后才能访问。Qwik/Vue/React均提供组件安装挂钩。

• https://qwik.builder.io/docs/components/lifecycle/#usemount
• https://vuejs.org/api/composition-api-lifecycle.html#onmounted
• https://reactjs.org/docs/react-component.html#componentdidmount

在这些挂载钩子中，您可以通过id或querySelector引用DOM元素，或者使用Qwuik/Vue/React的内部DOM引用特性，然后在初始化图表时使用该特性。后者是更清洁的方法。

例如，在Vue中：

<template>
<div id="acquisitions" ref="chartEl"></div>
</template>
<script setup>
import Chart from 'chart.js/auto';
import { ref, onMounted } from 'vue';
const chartEl = ref(null)


onMounted(() => {

 const chartOpts = {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }

 new Chart(
    chartEl.value,
    chartOpts    
  );
})

</script>