如何在Chart.js的坐标轴文本旁添加图标？

实现思路 #

Chart.js原生不支持在坐标轴标题中直接嵌入SVG，我们可以通过自定义插件，在图表绘制完成后，利用Canvas的API将SVG绘制到指定位置（X轴标题右侧、Y轴标题上方）。

具体实现步骤 #

1. 处理本地SVG资源 #

将本地SVG文件放到Angular项目的assets文件夹中（比如命名为icon.svg），之后通过assets/icon.svg路径访问即可，也可以将SVG转成Data URL避免跨域问题。

2. 添加自定义Chart.js插件 #

在组件中定义自定义插件，通过afterDraw钩子获取坐标轴标题的位置，加载SVG并绘制到目标位置。

3. 调整坐标计算逻辑 #

根据X轴、Y轴标题的位置和尺寸，计算SVG的绘制坐标：

• X轴：标题文本右侧，与标题垂直居中对齐
• Y轴：标题文本上方，与标题水平居中对齐

修改后的完整代码 #

import { Component, VERSION } from '@angular/core';
import { ChartOptions, TooltipItem, Chart, Plugin } from 'chart.js';

const labels = [
  'Jan',
  'Feb',
  'Mar',
  'April',
  'May',
  'Jun',
  'July',
  'Aug',
  'Sept'
];

const tooltipPlugin = Chart.registry.getPlugin('tooltip') as any;
tooltipPlugin.positioners.verticallyCenter = (elements, position) => {
  if (!elements.length) {
    return tooltipPlugin.positioners.average(elements);
  }
  const { x, y, base, width } = elements[0].element;
  const height = (base - y) / 2;
  const offset = x + width / 2;
  return {
    x: offset,
    y: y + height
  };
};

// 自定义插件：绘制SVG到坐标轴标题旁
const axisIconPlugin: Plugin = {
  id: 'axisIconPlugin',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const svgUrl = 'assets/icon.svg'; // 替换为你的SVG实际路径
    const iconSize = 16; // 图标大小，可按需调整
    const spacing = 8; // 图标与标题的间距

    // 绘制X轴标题右侧的图标
    const xAxis = chart.scales.x;
    if (xAxis.options.title.display) {
      const titleBounds = xAxis.title.getBounds();
      // 计算图标坐标：标题右侧，垂直居中
      const drawX = titleBounds.x + titleBounds.width + spacing;
      const drawY = titleBounds.y + titleBounds.height / 2 - iconSize / 2;

      const img = new Image();
      img.onload = () => ctx.drawImage(img, drawX, drawY, iconSize, iconSize);
      img.src = svgUrl;
    }

    // 绘制Y轴标题上方的图标
    const yAxis = chart.scales.y;
    if (yAxis.options.title.display) {
      const titleBounds = yAxis.title.getBounds();
      // 计算图标坐标：标题上方，水平居中
      const drawX = titleBounds.x + titleBounds.width / 2 - iconSize / 2;
      const drawY = titleBounds.y - iconSize - spacing;

      const img = new Image();
      img.onload = () => ctx.drawImage(img, drawX, drawY, iconSize, iconSize);
      img.src = svgUrl;
    }
  }
};

// 注册自定义插件
Chart.register(axisIconPlugin);

const data = {
  labels: labels,
  datasets: [
    {
      maxBarThickness: 40,
      label: '',
      data: [50, 20, 30, 75, 30, 60, 70, 80, 100],
      backgroundColor: 'red'
    }
  ]
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  data = data;
  options: ChartOptions = {
    aspectRatio: 2,
    layout: {
      padding: {
        top: 25, // 给Y轴上方的图标预留空间，避免被裁剪
        bottom: 0
      }
    },
    responsive: true,
    maintainAspectRatio: true,
    scales: {
      y: {
        title: {
          display: true,
          text: 'Y Axis'
        },
        axis: 'y',
        grid: {
          display: false,
          drawTicks: false,
          tickLength: 0
        },
        max: 100,
        ticks: {
          major: {
            enabled: false
          },
          padding: 17,
          stepSize: 25,
          callback: (value, index, ticks) => {
            return index === 0 || index === ticks.length - 1 ? '' : `${value}%`;
          }
        }
      },
      x: {
        title: {
          display: true,
          text: 'X Axis'
        },
        axis: 'x',
        grid: { drawTicks: false },
        ticks: {
          padding: 17
        }
      }
    },
    plugins: {
      tooltip: {
        position: 'verticallyCenter' as 'average',
        animation: { duration: 0 },
        callbacks: {
          title: (context: TooltipItem<'bar'>[]) => {
            return context[0].label;
          }
        }
      },
      legend: {
        display: false,
        position: 'bottom'
      },
      title: {
        display: false
      }
    }
  };
}

关键细节说明 #

• SVG加载：使用Image对象加载SVG，确保路径指向正确（放在assets目录下可避免大部分跨域问题）。
• 坐标计算：通过title.getBounds()获取标题的位置和尺寸数据，以此为基准调整图标的绘制位置，保证对齐效果。
• 布局适配：为Y轴上方的图标预留顶部padding，防止图标被图表容器裁剪。
• 插件生效：必须通过Chart.register()注册自定义插件，才能在图表绘制流程中触发插件逻辑。

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