Ant Design Charts柱状图动态自定义标签实现问题求助

要实现动态关联每个数据项的type字段作为标签内容，只需将label配置中的content设置为一个函数即可——该函数会自动接收当前数据项作为参数，你可以直接从中提取所需字段。

修改核心配置 #

将原代码中固定值的content：

label: {content: data[0].type}, // How can the content link to the data?

替换为动态函数形式：

label: {content: (datum) => datum.type},

完整示例代码 #

import React from 'react';
import ReactDOM from 'react-dom';
import { Bar } from '@ant-design/plots';

const DemoBar = () => {
  const data = [
    {
      year: '1991',
      value: 3,
      type: 'Water',
    },
    {
      year: '1991',
      value: 4,
      type: 'Land',
    },
  ];
  const config = {
    data: data.reverse(),
    isStack: true,
    xField: 'value',
    yField: 'year',
    seriesField: 'type',
    legend: false,
    label: {content: (datum) => datum.type}, // 动态绑定当前数据项的type字段
    interactions: [{ type: 'tooltip', enable: false }]
  };
  return <Bar {...config} />;
};

ReactDOM.render(<DemoBar />, document.getElementById('container'));

扩展自定义 #

如果需要更复杂的标签内容，还可以通过函数拼接多个字段，比如同时显示类型和数值：

label: {content: (datum) => `${datum.type}: ${datum.value}`},

内容的提问来源于stack exchange，提问作者Veronica