Worldcloud chartJS TSX 扩展/移动

Question

我在一个tsx项目中实现了这种形式的worldcloud：[https://www.npmjs.com/package/chartjs-chart-wordcloud]。云已实施并且大部分情况下运行良好。我在图表上有 useEffect，但它只能运行一个（可能在调试模式下运行两次，这就是为什么我有一个 if 语句）。但是，是的，我不明白它为什么会移动，最初的实现表明无意这样做。我正在为 css 使用 tsx 和 tailwind。

这是我实现的代码。

import React, { useEffect } from 'react';

import { WordCloudChart } from 'chartjs-chart-wordcloud';
import { Chart, registerables } from 'chart.js';
import { Chart as ChartJS } from 'chart.js/auto'
Chart.register(...registerables);



export const WordCloud: React.FunctionComponent = () => {
  let chart:any;
  useEffect(() => {
    if (chart) {
      chart.destroy();
    }
    let canvas : any = document.getElementById("mycanvas");
    let ctx = canvas.getContext("2d", { willReadFrequently: true }); 
    
    chart = new WordCloudChart(ctx, {
      data: {
        // text
        labels: ['Hello', 'world', 'normally', 'you', 'want', 'more', 'words', 'than', 'this'],
        datasets: [
          {
            label: 'DS',
            // size in pixel
            data: [90, 80, 70, 60, 50, 40, 30, 20, 10],
          },
        ],
      },
      options: {},
    });
  }, []);


  return(
    <div className='max-h-10'>
      <canvas className='max-h-10 max-w-10' id="mycanvas"></canvas>
    </div>
  );
};