我已经实现了如下形式的worldcloud：[https：//www.npmjs.com/package/chartjs-chart-wordcloud]在一个tsx项目中。这个云已经实现了，而且大部分都做得很好。我在图表上有useEffect，但是它只被假定运行一次（在调试模式下可能运行两次，这就是为什么我有一个if语句）。但是是的，我不明白它为什么要移动，最初的实现没有显示这样做的意图。我使用tsx，css使用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>
  );
};