react-chartjs-2 - Chart.js 3 气泡图不渲染数据

Question

我正在尝试使用react-chartjs-2和chart.js添加气泡图，但它没有渲染任何东西。

• “chart.js”：“3.3.2”
• “react-chartjs-2”：“3.0.3”

我尝试了不同的数据集，但它只是呈现空图表。我错过了什么吗？或者react-chartjs-2不适用于Chart.js 3？

const colorize = (opaque, context) => {
    const value = context.dataset.data[context.dataIndex];
    const x = value.x / 100;
    const y = value.y / 100;
    const r = x < 0 && y < 0 ? 250 : x < 0 ? 150 : y < 0 ? 50 : 0;
    const g = x < 0 && y < 0 ? 0 : x < 0 ? 50 : y < 0 ? 150 : 250;
    const b = x < 0 && y < 0 ? 0 : x > 0 && y > 0 ? 250 : 150;
    const a = opaque ? 1 : (0.5 * value.v) / 1000;

    return `rgba(${  r  },${  g  },${  b  },${  a  })`;
  };

<ChartComponent
        ref={bubbleChart}
        type="bubble"
        data={{
          labels: ['January'],
          datasets: [
            {
              label: 'My First dataset',
              fill: false,
              lineTension: 0.1,
              backgroundColor: 'rgba(75,192,192,0.4)',
              borderColor: 'rgba(75,192,192,1)',
              borderCapStyle: 'butt',
              borderDash: [],
              borderDashOffset: 0.0,
              borderJoinStyle: 'miter',
              pointBorderColor: 'rgba(75,192,192,1)',
              pointBackgroundColor: '#fff',
              pointBorderWidth: 1,
              pointHoverRadius: 5,
              pointHoverBackgroundColor: 'rgba(75,192,192,1)',
              pointHoverBorderColor: 'rgba(220,220,220,1)',
              pointHoverBorderWidth: 2,
              pointRadius: 1,
              pointHitRadius: 10,
              data: [{ x: 10, y: 20, r: 5 }]
            }
          ]
        }}
        options={{
          maintainAspectRatio: false,
          aspectRatio: 1,
          tooltips: false,
          elements: {
            point: {
              backgroundColor: colorize.bind(null, false),
              borderColor: colorize.bind(null, true),
              borderWidth (context) {
                return Math.min(Math.max(1, context.datasetIndex + 1), 8);
              },
              radius (context) {
                const value = context.dataset.data[context.dataIndex];
                const size = context.chart.width;
                const base = Math.abs(value.v) / 1000;
                return (size / 24) * base;
              }
            }
          }
        }}
      />