如何在Chart.js中为工具提示添加$前缀并取消小数位

要给柱状图工具提示添加$前缀并隐藏小数位，直接通过Chart.js的工具提示回调函数自定义显示内容即可，具体实现如下：

1. 在Chart实例的配置项中，添加plugins.tooltip.callbacks.label回调函数，对数值进行格式化：

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          // 取整数值并添加$前缀
          return '$' + Math.round(context.parsed.y);
        }
      }
    }
  }
}

2. 结合你的数据处理逻辑，完整的图表初始化代码示例（补充现有代码的后续部分）：

// （你的现有数据处理代码：handleQueryResponse内的逻辑）
// 准备图表数据集
const datasets = [];
for (let r = 0; r < rows; r++) {
  const values = [];
  for (let c = 1; c < dataj.cols.length; c++) {
    values.push(dataj.rows[r].c[c].v);
  }
  datasets.push({
    label: dataj.rows[r].c[0].v,
    data: values,
    backgroundColor: colors[r % colors.length]
  });
}

// 初始化柱状图
new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            return '$' + Math.round(context.parsed.y);
          }
        }
      }
    }
  }
});

说明 #

• Math.round(context.parsed.y)：将原始数值取整，彻底去除小数位；
• 拼接$前缀后返回，工具提示就会显示为$XXX的格式；
• 如果你的数值对应x轴，只需将context.parsed.y替换为context.parsed.x即可。

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