如何使用JavaScript在柱状图上绘制百分比标签

针对你使用Chart.js 2.9.4版本的柱状图需求，以下两种方法可以实现柱子顶部显示百分比标签的效果：

方法一：使用chartjs-plugin-datalabels插件（简洁高效） #

通过引入官方维护的标签插件，快速实现百分比标签渲染：

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<!-- 引入数据标签插件 -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];
// 计算所有数据的总和
const total = yValues.reduce((acc, val) => acc + val, 0);

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    },
    plugins: {
      datalabels: {
        // 格式化标签为百分比，保留1位小数
        formatter: (value) => `${((value / total) * 100).toFixed(1)}%`,
        color: "#000",
        anchor: "end", // 标签锚定在柱子顶部
        align: "top" // 标签对齐方式
      }
    }
  }
});
</script>
</body>
</html>

关键说明： #

• 引入chartjs-plugin-datalabels插件后，直接在plugins配置项中定义标签的格式、位置和样式
• 用reduce计算数据总和，确保百分比计算准确
• 可通过调整toFixed()的参数修改小数位数，或修改color、anchor等属性自定义标签样式

方法二：自定义绘制标签（无需额外插件） #

如果不想引入外部插件，可通过Chart.js的动画完成回调手动绘制文本：

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:600px"></canvas>
<script>
const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];
const total = yValues.reduce((acc, val) => acc + val, 0);

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "World Wine Production 2018"
    },
    animation: {
      onComplete: function() {
        const ctx = this.chart.ctx;
        // 配置文本样式
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "#000";
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        // 遍历每个柱子绘制标签
        this.data.datasets.forEach((dataset) => {
          dataset._meta[Object.keys(dataset._meta)[0]].data.forEach((bar, index) => {
            const value = dataset.data[index];
            const percentage = ((value / total) * 100).toFixed(1);
            // 在柱子顶部上方5px位置绘制百分比
            ctx.fillText(`${percentage}%`, bar._model.x, bar._model.y - 5);
          });
        });
      }
    }
  }
});
</script>
</body>
</html>

关键说明： #

• 利用animation.onComplete回调，在图表渲染完成后执行绘制逻辑
• 通过柱子的_model属性获取坐标位置，精准控制标签位置
• 可调整bar._model.y - 5中的数值，改变标签与柱子顶部的间距

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