Canvas绘制柱状图时最大值（60）标签不显示问题求助

问题描述 #

使用Canvas绘制柱状图，通过JSON文件加载数据[25, 30, 40, 50, 35, 20, 45, 60, 55, 50]时，所有数值标签均正常显示，唯独最大值60的标签无法显示。尝试在绘制标签代码中添加条件调整最后一个柱子的X坐标后，最右侧的柱子也消失了。

原因分析 #

1. 最大值标签不显示：最大值60对应的柱子高度为(60/60)*500=500，柱子顶部Y坐标为500-500=0。原代码中标签绘制在y-10 = -10，该位置超出Canvas可视区域（Canvas的Y轴向下，Y值小于0的部分在画布外部），因此无法看到标签。
2. 柱子消失：修改代码时直接改动了循环中的x变量，而这个变量是绘制柱子fillRect的起始X坐标，导致柱子位置偏移到画布外部，所以柱子消失。

修复方案 #

1. 调整最大值标签的Y坐标：判断当柱子顶部Y坐标过小（接近或等于0）时，将标签绘制在柱子内部或画布可见区域内，避免超出边界。
2. 不修改绘制柱子的X变量：调整标签位置时直接计算新的坐标值，不要改动用于绘制柱子的原始x变量。

修改后的完整代码 #

script.js #

try {
  // Load data from JSON file
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Initialize canvas element
      const canvas = document.getElementById('myCanvas');
      if (!canvas) {
        throw new Error('Canvas element not found');
      }
      const ctx = canvas.getContext('2d');

      // Set chart properties
      let chartWidth = 500;
      let chartHeight = 500;
      const barSpacing = 10;
      const barWidth = (chartWidth - (data.length - 1) * barSpacing) / data.length;
      const maxValue = Math.max(...data);
      const labelFont = '16px Arial';
      const valueFont = '12px Arial';
      const labelColor = '#333';
      const valueColor = '#999';

      // Draw bars and labels
      data.forEach((value, index) => {
        const x = index * (barWidth + barSpacing);
        const height = (value / maxValue) * chartHeight;
        const y = chartHeight - height;

        // Draw bar
        ctx.fillStyle = '#66a';
        ctx.fillRect(x, y, barWidth, height);

        // Draw label
        ctx.font = labelFont;
        ctx.fillStyle = labelColor;
        ctx.textAlign = 'center';
        ctx.fillText(` ${index + 1}`, x + barWidth / 2, chartHeight + 20);

        // Draw value - 修复标签位置
        ctx.font = valueFont;
        ctx.fillStyle = valueColor;
        ctx.textAlign = 'center';
        // 判断如果标签位置超出画布顶部，就调整到柱子内部或合适位置
        const labelY = y <= 10 ? y + height/2 : y - 10;
        ctx.fillText(value, x + barWidth / 2, labelY);
      });
    })
    .catch(error => console.log(error.message));
} catch (error) {
  console.log(error.message);
}

说明 #

• 修复了最大值标签的位置：当柱子顶部Y坐标小于等于10时，将标签放在柱子垂直居中的位置，确保在画布可见区域内；其他情况保持原位置。
• 保留了用于绘制柱子的原始x变量，避免柱子位置偏移导致消失。

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