在背景長條圖中，怎麼在 label text 後方，以及長條圖上加上圖示

[jane-lin-tg]

Hi,
想請問在背景長條圖 (Bar) 中，當百分比大於等於 100% 時, 要怎麼在以下地方加上圖示？

1. label text 右側，新增 綠勾 icon (下圖紅色圓勾處示意)
2. 長條圖之中，100% 的位置上會有一組旗子圖標和文字 (下圖紅色星星處示意)

第一項我試過在 label.text 的百分比後面加，但似乎只允許 string, 不能顯示 React 元件或 svg 等
第二項我推測可能可以用 annotations，但這部分我找到的範例跟文檔資料不多，不太明白 type 接受哪些值、有哪些設定可用？或者有更適合的設定值能達到這個效果

以下期望示意：
退休人員百分比超過 100%, 在長條圖及 label.text 後面會多加圖示

以下資料結構範例：

const data = [
  {
    labelName: '蓝领',
    value: 110,
    target: 200,
    percentage: '55%',
  },
  {
    labelName: '白领',
    value: 220,
    target: 300,
    percentage: '73.33%',
  },
  {
    labelName: '制造业蓝领',
    value: 330,
    target: 500,
    percentage: '66%',
  },
  {
    labelName: '退休人员',
    value: 440,
    target: 300,
    percentage: '146.66%',
  },
];

[lxfu1]

标题：Bar 图中百分比≥100% 时，如何在 label 和柱状图添加图标

---

1. 在 label 右侧添加图标（如绿勾）

问题分析

• Ant Design Charts 的 Bar 组件的 label.formatter 仅支持返回字符串，不支持 React 元件或 SVG。
• 无法直接在 label 后面插入图片或图标。

解决方案

Ant Design Charts 文档暂未支持在 label 直接插入图标（React 节点或 HTML/SVG），可以考虑：

1. 用 Unicode 字符或 emoji 作为辅助
   虽然不能插 svg，但可以在 label 文本中拼接勾选符号：

   label: {
     formatter: (datum) => {
       const percentNum = parseFloat(datum.percentage);
       return percentNum >= 100 ? `${datum.percentage} ✔️` : datum.percentage;
     },
   }

   这样会显示 ✔️ 或 ✓ 字符，但不支持复杂的 svg 或图片。

2. 自定义图表或使用 G2Plot
   如果需要完全自定义 label，可以参考 G2Plot 文档 或使用 Chart.js/echarts 等，Ant Design Charts v2.4.0 暂不支持 label 里插入图片。

文档相关章节：

• Bar 图 label 配置

---

2. 在柱状图 100% 位置添加旗子图标/文字

问题分析

• Ant Design Charts v2.4.0 支持 annotations 用于图表上的自定义标记（推荐用）。
• annotations 可以放置标识、文本、图片等。

标准用法：

import { Bar } from '@ant-design/charts';

const config = {
  data,
  xField: 'value',
  yField: 'labelName',
  seriesField: 'labelName',
  label: {
    formatter: (datum) => datum.percentage,
  },
  annotations: [
    {
      type: 'text',
      position: ['100', 'labelName'], // x轴数据为 100 对应的位置
      content: '旗子',
      style: {
        fontSize: 14,
        fill: 'red',
      },
    },
    // 如需图片，用 image 类型
    {
      type: 'image',
      position: ['100', 'labelName'],
      src: '你的旗子图片 url',
      width: 20,
      height: 20,
      // 可用 offsetX/Y 微调
    },
  ],
};

参数说明：

• type：text 或 image
• position：[x轴数值, y轴类名]
• content：文本内容（仅 text 类型）
• src：图片地址（仅 image 类型）
• 样式参数：fontSize、fill（文本），width/height（图片）

可用 annotation 类型（查看文档）：

• line （直线）
• text （文本）
• image （图片）
• region （区域）
• dataMarker （数据点标记）

示例代码：

import { Bar } from '@ant-design/charts';

const config = {
  data,
  xField: 'value',
  yField: 'labelName',
  label: {
    formatter: (datum) => datum.percentage,
  },
  annotations: data
    .map((item) =>
      parseFloat(item.percentage) >= 100
        ? [
            {
              type: 'text',
              position: ['100', item.labelName],
              content: '旗子',
              style: {
                fontSize: 14,
                fill: '#f00',
              },
            },
            {
              type: 'image',
              position: ['100', item.labelName],
              src: '/flag.png',
              width: 16,
              height: 16,
              offsetY: -20,
              offsetX: 0,
            },
          ]
        : []
    )
    .flat(),
};

<Bar {...config} />

---

总结

1. Bar label 右侧图标
   • 只支持字符串、emoji、Unicode，不支持 React 节点/svg/图片。
   • 定制需求可以考虑二次开发或换用底层库。
2. 柱状图 100% 添加旗子图标
   • 推荐用 annotations，type 支持 text/image。
   • 用 position 控制标记位置。

---

相关文档链接

• Bar 图组件文档
• Annotation 标注配置
• label 属性配置说明

---

如有具体的旗子图片/文本样式需求，可补充说明场景！

---

此回答由AI自动生成，仅供参考。如有疑问，请等待维护者回复。

[jane-lin-tg]

問題解決了，以下擷取相關的部分，分享自己的作法給有需要的開發者們參考：

import { Bar } from '@ant-design/charts';

// Render flag SVG
const renderFlag = ({ x, y }: { x: number; y: number }, context: any) => {
  const { document } = context;
  const g = document.createElement('g', {});

  // 使用 document.createElement 繪製各個部分
  // 使用 g.appendChild() 加入繪製的部分

  return g;
};

// Render check icon SVG
const renderCheckIcon = ({ x, y }: { x: number; y: number }, context: any) => {
  const { document } = context;
  const g = document.createElement('g', {});

  // 使用 document.createElement 繪製各個部分
  // 使用 g.appendChild() 加入繪製的部分

  return g;
};

const config = {
  data: officeData,
  xField: 'office_name',
  yField: 'count',
  paddingRight: 160, // label + check icon
  markBackground: {
    label: {
      text: (originData: OfficeDistributionItem & { originData: OfficeDistributionItem }) => {
        const { count, target, percentage } = originData.originData;
        return `${count}/${target} (${percentage})`;
      },
      position: 'right',
      dx: 110,
    },
  },
  annotations: [
    // Flag: at target value position (only for items that achieved goal)
    {
      type: 'shape' as const,
      data: officeData.filter((item) => item.goalAchieved),
      xField: 'office_name',
      yField: 'target',
      style: {
        render: renderFlag,
      },
    },
    // Check icon: to the right of label percentage (only for items that achieved goal)
    {
      type: 'shape' as const,
      data: officeData
        .filter((item) => item.goalAchieved)
        .map((item) => ({
          ...item,
          xPos: domainMax,
        })),
      xField: 'office_name',
      yField: 'xPos',
      style: {
        render: (coords: { x: number; y: number }, context: ShapeRenderContext) => {
          const checkIconX = coords.x + 10 + 105 + 4;
          return renderCheckIcon({ x: checkIconX, y: coords.y }, context);
        },
      },
    },
  ],
}

<Bar {...config} />