Chart.js 3 气泡图不呈现数据

问题描述

我正在尝试使用 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,0.4)',borderColor: 'rgba(75,1)',borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: 'rgba(75,pointBackgroundColor: '#fff',pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: 'rgba(75,pointHoverBorderColor: 'rgba(220,220,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;
              }
            }
          }
        }}
      />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）