Chart.js v2面积图如何为销售额、退货额tooltip添加Rp货币单位？

问题原因 #

你当前的tooltip回调错误引用了X轴的日期标签作为指标前缀，所以无法输出预期的“销售额”“退货额”开头的格式。

修复方案 #

直接修改tooltips.callbacks.label配置，先把数据集的英文label映射为中文，再拼接Rp单位和数值即可，修改后的配置如下：

tooltips:{
  callbacks:{
    label: (ttItem, items) => {
      // 数据集标签中英文映射，后续新增数据集可直接在此扩展
      const labelMap = {
        'Sales': '销售额',
        'Retur': '退货额'
      }
      const currentDatasetLabel = items.datasets[ttItem.datasetIndex].label;
      const currentValue = ttItem.yLabel;
      return `${labelMap[currentDatasetLabel]}: Rp. ${currentValue}`
    }
  } 
}

注：数值部分用ttItem.yLabel是Chart.js v2已经封装好的当前数据点Y轴数值，和你原有写法items.datasets[ttItem.datasetIndex].data[ttItem.index]效果完全一致，写法更简洁。

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