如何使用 chartjs-plugin-datalabels 更改气泡图中每个气泡的默认标签

Question

我正在尝试使用 chartjs-plugin-datalabels 为气泡图中的每个气泡添加标签。对于每个气泡，我想显示 data.dataset 数组
的每个对象的标签属性像“葡萄柚”，“酸橙”。我得到所有气泡的 r 值。我们可以更改此标签吗？

我看到了例子，但没有做对。我不知道我做错了什么。

const data = {
  datasets: [
    {
      label: 'Grapefruit',
      data: [
        {
          x: 10,
          y: 40,
          r: 40,
        },
      ],
      backgroundColor: 'rgb(255, 99, 132)',
    },

    {
      label: 'Lime',

      data: [
        {
          x: 23,
          y: 37,
          r: 40,
        },
      ],
      backgroundColor: 'rgb(105, 89, 175)',
    },
    {
      label: 'Coconut',
      data: [
        {
          x: 26,
          y: 33,
          r: 40,
        },
      ],
      backgroundColor: 'rgb(249, 236, 61)',
    },
    {
      label: 'Mango',
      data: [
        {
          x: 40,
          y: 40,
          r: 40,
        },
      ],
      backgroundColor: 'rgb(255, 128, 0)',
    },
  ],
};

const options = {
  scales: { x: { display: false }, y: { display: false } },
  maintainAspectRatio: false,
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {},
  },
};

const App = () => {
  return <Bubble data={data} height={415} width={310} options={options} />;
};

Answer 1

可以使用datalabels插件中的formatter函数来实现：

Chart.register(ChartDataLabels)

const options = {
  type: 'bubble',
  data: {
    datasets: [{
        label: 'Orange',
        data: [{
          x: 1,
          y: 4,
          r: 26,
          fruit: 'orange'
        }],
        backgroundColor: 'orange'
      },
      {
        label: 'Apple',
        data: [{
          x: 4,
          y: 2,
          r: 26,
          fruit: 'apple'
        }],
        backgroundColor: 'red'
      },
      {
        label: 'Grape',
        data: [{
          x: 6,
          y: 1,
          r: 26
        }],
        backgroundColor: 'purple'
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        formatter: (dp, ctx, b) => (ctx.dataset.label)
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2 "></script>
</body>

如何使用 chartjs-plugin-datalabels 更改气泡图中每个气泡的默认标签

How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels

javascript

bubble-chart

reactjs

chart.js

react-chartjs