Chart.js折线图定位异常求助：折线未延伸至图表两端

问题原因 #

分组柱状图的X轴刻度默认居中于每组柱子的中间位置，折线图默认对齐刻度中心，导致折线无法覆盖到每组柱子的左右边缘出现截断。同时你的X轴配置错误使用了数值轴的ticks.beginAtZero和min:0参数（类别轴无需这些配置），进一步干扰了轴的范围计算。

具体修复步骤 #

1. 修正X轴无效配置 #

移除X轴ticks中的beginAtZero和min参数（类别轴不需要数值轴的配置项）：

scales: {
  x: {
    grid: {
      display: false,
      drawTicks: false,
    },
    border: {
      display: false,
      dash: [2, 4],
    },
    ticks: {
      padding: 1,
      // 移除以下两行无效配置
      // beginAtZero: true,
      // min: 0,
    },
    offset: true,
  },
  // Y轴配置保持不变
}

2. 配置折线图对齐分组柱子边缘 #

在折线图的数据集里添加offset: true，让折线对齐每组柱子的边缘而非刻度中心：

{
  label: 'age',
  data: ageArray,
  backgroundColor: gradient,
  borderWidth: 2,
  pointRadius: 0,
  tension: 0,
  fill: true,
  type: "line",
  order: 2,
  offset: true, // 添加该行配置
},

3. （可选）自定义插件强制延伸折线 #

如果上述步骤未解决问题，可添加自定义插件修改折线绘制路径，强制延伸至图表两端：

plugins: [
  {
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const xAxis = chart.scales.x;
      const lineDataset = chart.data.datasets.find(ds => ds.type === 'line');
      const lineMeta = chart.getDatasetMeta(lineDataset.index);
      
      if (lineMeta) {
        const firstPoint = lineMeta.data[0];
        const lastPoint = lineMeta.data[lineMeta.data.length - 1];
        
        // 绘制从图表左边缘到第一个数据点的线段
        ctx.beginPath();
        ctx.moveTo(xAxis.left, firstPoint.y);
        ctx.lineTo(firstPoint.x, firstPoint.y);
        ctx.strokeStyle = lineDataset.borderColor || '#008000';
        ctx.lineWidth = lineDataset.borderWidth;
        ctx.stroke();
        
        // 绘制从最后一个数据点到图表右边缘的线段
        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(xAxis.right, lastPoint.y);
        ctx.strokeStyle = lineDataset.borderColor || '#008000';
        ctx.lineWidth = lineDataset.borderWidth;
        ctx.stroke();
      }
    }
  },
  // 原有legend插件配置保持不变
]

效果说明 #

完成修改后，折线会从第一组橙色柱子的左侧起始，延伸至最后一组蓝色柱子的右侧，完全覆盖图表宽度。

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