如何让ChartJS柱状图上方的数据值更大更粗？

要让柱状图顶部的数值更大更粗，核心是给Canvas上下文（ctx）配置字体大小与粗细，同时启用必要的文本对齐规则。以下是修改后的完整代码：

onComplete: function () {
  var chartInstance = this.chart;
  var ctx = chartInstance.ctx; // 获取当前图表的Canvas上下文
  ctx.textAlign = 'center'; // 文本居中对齐
  ctx.fillStyle = "rgba(0, 0, 0, 1)"; // 文本颜色（可按需调整）
  ctx.textBaseline = 'bottom'; // 文本基线，确保数值在柱状图顶部的位置准确
  ctx.font = 'bold 16px Arial'; // 关键配置：加粗+16号字体，可自行调整大小

  this.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      meta.data.forEach(function (bar, index) {
          var data = dataset.data[index];
          ctx.fillText(data, bar._model.x, bar._model.y - 10);
      });
  });
}

关键修改说明 #

• 取消注释var ctx = chartInstance.ctx;：确保操作的是当前图表专属的Canvas上下文，避免全局上下文冲突。
• 添加ctx.font = 'bold 16px Arial';：这是控制文字样式的核心，bold实现加粗效果，16px是字体大小（可根据图表尺寸改成18px、20px等），也可替换为适配中文的字体如'bold 16px "Microsoft Yahei"'。
• 保留textAlign和textBaseline：保证数值在柱状图顶部居中显示，不会出现偏移。

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