如何使用折线图绘制如图所示的直线？添加x: { offset: true }仍有问题

问题根源 #

你设置的tension: 0.1会给折线添加轻微的平滑曲线效果，这就是导致B到C段无法完全笔直的核心原因。而x: { offset: true }仅控制坐标轴刻度的偏移，和折线的平滑度没有关联。

修复方案 #

• 将数据集里的tension值改为0，强制折线使用完全笔直的线段，关闭所有平滑效果
• 若需要坐标轴刻度偏移效果，可保留x: { offset: true }配置

修改后的代码：

const labels = ["A", "B", "C", "D"];
const data = {
  labels: labels,
  borderColor: "",
  datasets: [
    {
      label: "Title",          
      data: [0, 50, 50, -10],
      fill: false,
      borderWidth: 5,
      borderColor: "yellow",
      tension: 0, // 设为0关闭平滑效果
    },
  ],
};

补充说明 #

如果后续需要实现部分线段平滑、部分线段笔直的效果，Chart.js 3.0及以上版本支持在单个数据点中单独设置tension属性，但针对你当前的需求，全局将tension设为0就可以解决问题。

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