Angular中ng2-chart垂直条形图与X轴标签错位问题求助

问题根源 #

你的代码中，prepareChartData方法为每个分类创建了独立的数据集（dataset），且每个数据集的data是该分类下的所有支出值数组。这会导致X轴的每个标签位置堆叠多个条形，最终出现条形与标签错位的情况。

修正方案 #

1. 调整数据处理逻辑，汇总分类支出

修改prepareChartData方法，计算每个分类的总支出，将所有分类的总支出放入单个数据集，确保X轴标签与条形一一对应：

prepareChartData(expenses: ExpenseStatistic[]) {
  // 计算每个分类的总支出
  const categoryTotals = expenses.reduce((acc, expense) => {
    const category = expense.categoryName ?? 'Unknown';
    acc[category] = (acc[category] || 0) + (expense.value ?? 0);
    return acc;
  }, {} as Record<string, number>);

  this.barChartLabels = Object.keys(categoryTotals);
  const totals = Object.values(categoryTotals);
  const colors = this.generateColors(this.barChartLabels.length);

  // 生成单个数据集，每个标签对应一个条形
  this.barChartData = [{
    data: totals,
    label: 'Total Expenses',
    backgroundColor: colors,
    borderWidth: 1,
    barPercentage: 0.7,
    categoryPercentage: 0.9,
    stack: 'a'
  }];
}

2. 优化X轴配置确保对齐

调整barChartOptions，添加标签对齐和偏移设置：

public barChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    x: {
      type: 'category',
      grid: {
        display: false
      },
      offset: false, // 关闭偏移，让条形与标签严格对齐
      ticks: {
        align: 'center' // 标签居中显示在条形下方
      }
    },
    y: {
      beginAtZero: true,
    }
  },
};

3. 确认图表类型

确保barChartType设置为'bar'（垂直条形图），而非水平条形图：

public barChartType: ChartType = 'bar';

验证效果 #

修改后，每个X轴标签会对应一个条形，条形将精准对齐在标签正上方，解决错位问题。

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