Chart.js 3.7.1左侧刻度隐藏及顶部标签截断问题求助

问题 #

1. 如何关闭截图中高亮显示的0至45000的额外刻度？需在Chart.js 3.7.1版本中解决，不升级至最新版；
2. 顶部100%位置的数值标签被截断，如何修复？

当前配置与数据 #

图表配置选项 #

export const chartOptions: ICustomChartOptions = {
  responsive: true,
  layout: {},
  elements: {
    bar: {
      borderRadius: 4,
    },
    line: {
      borderWidth: 3,
    },
    point: {
      backgroundColor: '#FFFFFF',
      borderWidth: 2,
      radius: 4,
    },
  },
  clip: false,
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100000,
    },
    y: {
      position: 'left',
      grid: {
        drawBorder: false,
      },
      ticks: {
        callback: function (value) {
          return `${value}%`;
        },
        stepSize: 25,
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100,
      beginAtZero: true,
    },
  },
  plugins: {},
};

图表数据 #

export const chartData: ChartData<'line'> = {
  labels: chartLabels,
  datasets: [
    {
      type: 'line',
      // yAxisID: 'line',
      data: [100, 20, 49, 10, 97],
      order: 1,
      datalabels: {
        anchor: 'start',
        align: 'end',
        color: color['Purple/Purple 80'],
        formatter(value) {
          return `${value}%`;
        },
      },
    },
    {
      type: 'bar' as 'line',
      yAxisID: 'bar',
      data: [22000, 17500, 12000, 10000, 44000],
      order: 2,
      datalabels: {
        align: 'end',
      },
    },
  ],
};

补充：使用ChartDataLabels插件显示数值

解决方案 #

1. 关闭额外的0-45000刻度 #

问题根源是你给bar数据集指定了yAxisID: 'bar'，但在scales配置中未定义该轴，Chart.js会自动生成一个默认y轴（即显示0-45000的那个）。只需在scales中显式配置bar轴并设置隐藏即可：

修改chartOptions中的scales部分：

scales: {
  x: {
    // 保留原有x轴配置
    grid: {
      display: false,
    },
    ticks: {
      font: {
        size: 10,
      },
    },
    min: 0,
    max: 100000,
  },
  y: {
    // 保留原有y轴配置
    position: 'left',
    grid: {
      drawBorder: false,
    },
    ticks: {
      callback: function (value) {
        return `${value}%`;
      },
      stepSize: 25,
      font: {
        size: 10,
      },
    },
    min: 0,
    max: 100,
    beginAtZero: true,
  },
  bar: {
    display: false, // 隐藏自动生成的bar轴
  },
}

2. 修复顶部100%标签截断问题 #

两种方法可解决：

• 方法一：增加图表顶部内边距
  在chartOptions的layout中添加顶部padding，给标签留出空间：

layout: {
  padding: {
    top: 20, // 根据实际显示效果调整数值
  },
},

• 方法二：调整数据标签偏移量
  给line数据集的datalabels添加offset属性，让标签向上偏移：

datalabels: {
  anchor: 'start',
  align: 'end',
  color: color['Purple/Purple 80'],
  formatter(value) {
    return `${value}%`;
  },
  offset: 10, // 调整偏移量避免截断
},

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