如何在React-ApexCharts的柱状图顶部显示应用图标？

要实现柱状图顶部显示应用图标，核心是利用ApexCharts的dataLabels配置项，通过自定义格式化函数返回图标HTML。以下是修改后的完整代码：

function PlatformCompareWidget(props) {
  // 定义各平台对应的图标（替换为你的实际图标路径）
  const platformIcons = {
    IOS: '<img src="/path/to/ios-icon.png" style="width:24px;height:24px;object-fit:contain;" />',
    Android: '<img src="/path/to/android-icon.png" style="width:24px;height:24px;object-fit:contain;" />',
    Web: '<img src="/path/to/web-icon.png" style="width:24px;height:24px;object-fit:contain;" />'
  };

  const chartSeries = [
    {
      name: 'IOS',
      data: props.singupUserData?.map((item) => Number(item.ios).toFixed(2)),
      color: '#51ABFF',
    },
    {
      name: 'Android',
      data: props.singupUserData?.map((item) => Number(item.android).toFixed(2)),
      color: '#34C759',
    },
    {
      name: 'Web',
      data: props.singupUserData?.map((item) => Number(item.web).toFixed(2)),
      color: '#9994FF',
    },
  ];

  const filterSeries =
    props.platform === ''
      ? chartSeries
      : chartSeries.filter((series) => series.name.toLowerCase() === props.platform);

  const chartOptions = {
    series: filterSeries,
    options: {
      grid: {
        show: false, // 隐藏背景水平线
      },
      legend: {
        show: false,
      },
      chart: {
        type: 'bar',
        height: 350,
        toolbar: {
          show: false,
        },
      },
      plotOptions: {
        bar: {
          borderRadius: 6,
          horizontal: false,
          columnWidth: props.platform === '' ? '25%' : '8%',
          endingShape: 'rounded',
        },
      },
      dataLabels: {
        enabled: true,
        // 自定义格式化函数，返回对应平台的图标
        formatter: (val, opts) => {
          return platformIcons[opts.w.globals.seriesNames[opts.seriesIndex]] || '';
        },
        offsetY: -25, // 调整图标与柱子顶部的间距（负数向上偏移）
        style: {
          fontSize: '0', // 隐藏数值文本，只显示图标
          colors: ['transparent']
        }
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent'],
      },
      xaxis: {
        categories: props.singupUserData?.map((item) =>
          item.date
            ? format(parse(item.date, 'yyyy-MM-dd', new Date()), 'dd MMM yyyy')
            : format(parse(item.month, 'yyyy-MM', new Date()), 'MMM yyyy')
        ),
      },
      yaxis: {
        show: false,
      },
      fill: {
        opacity: 1,
      },
    },
  };

  return (
    <ReactApexChart
      className="flex-auto w-full"
      options={chartOptions.options}
      series={chartOptions.series}
      height={320}
      type="bar"
    />
  );
}

关键修改说明： #

• platformIcons对象：存储各平台对应的图标HTML，替换为你的实际图标路径（本地资源或CDN链接均可）
• dataLabels配置：
  • enabled: true：开启数据标签渲染
  • formatter：根据当前系列的名称，返回对应的图标HTML
  • offsetY：调整图标位置，确保刚好落在柱子顶部
  • style：设置字体大小为0，隐藏默认的数值文本，只保留图标

注意事项： #

1. 如果使用本地图标，确保路径正确（可通过import导入后使用require或直接引用）
2. 可根据实际需求调整图标的尺寸、偏移量，保证视觉对齐
3. 若柱子高度过小，可适当调整chart.height或plotOptions.bar的参数，避免图标被截断

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