Angular使用Chart.js v2条形图实现提示框标签与数值间插入自定义符号

解决方案 #

你可以直接使用Chart.js v2 提供的tooltips.callbacks.label回调完全自定义提示框内容，灵活控制字符插入位置，无需拆分使用before/afterLabel。

将你代码中options.tooltips部分替换为以下配置即可实现标签: $ 数值 (ex GST)的格式需求：

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      // 获取当前数据集标签（如OTHER、CCA等）
      const datasetLabel = data.datasets[tooltipItem.datasetIndex].label;
      // 获取当前条形对应的数值，可根据需要调整toFixed的小数位数
      const value = Number(tooltipItem.yLabel).toFixed(1);
      // 自定义拼接输出格式
      return `${datasetLabel}: $ ${value} (ex GST)`;
    }
  }
}

如果你的数值本身已经做过格式化处理，直接使用tooltipItem.yLabel拼接即可，无需额外做toFixed转换。该回调返回的字符串就是最终显示在提示框里的每行内容，完全支持自定义拼接前缀、中间插入字符、后缀等所有自定义需求。

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