Angular ng2-charts混合图表x轴问题

Question

在我的示例中，我使用 Angular 15.2.4 和 ng2-charts 版本 4.1.1 以及 chart.js 4.2.1

我试图找出一种有效的方法，如何在条形图上绘制折线图。它应该不间断地贯穿整个图表，从 x=0 到 x=max 并且不会像我的结果那样被打断

这是我的意思的截图：

我在 Stackoverflow 上找到了一个解决方案，在开始和结束时使用空数据值制作占位符，但在我的情况下它似乎不起作用。

beginAtZero: true

也有一个选项，但我在另一个示例中尝试过它，但它并没有像我想要的那样工作。 结果如下：

这是我的混合图表组件：

export class MixedChartComponent {
  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

  public barChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    scales: {
      x: {},
      y: {
        min: 10
      }
    },
  };
  public barChartType: ChartType = 'bar';

  public barChartData: ChartData<'bar'> = {
    labels: [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ],
    datasets: [
    ]
  };

  data = [
    {
      "val1": 65,
      "val2": 50
    },
    {
      "val1": 59,
      "val2": 50
    },
    {
      "val1": 80,
      "val2": 50
    },
    {
      "val1": 81,
      "val2": 50
    },
    {
      "val1": 56,
      "val2": 50
    },
    {
      "val1": 55,
      "val2": 50
    },
    {
      "val1": 40,
      "val2": 50
    },
  ]

  setData() {

    let data_value1: any[] = [];
    let data_value2: any[] = [];

    this.data.forEach((entry) => {
      data_value1.push(entry['val1']);
      data_value2.push(entry['val2']);
    });

    let dataset1 : any = {
      data: data_value1,
      type: 'bar',
      label: 'Series A',
      barThickness: 35,
      borderRadius: 30,
      backgroundColor: 'rgba(88,84,247,0.5)'
    }
    let dataset2 : any = {
      data: data_value2,
      type: 'line',
      label: 'Series B',
      backgroundColor: 'rgba(176,195,230,0.2)',
      borderColor: 'rgba(176,195,230,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      fill: 'origin',
    }

    this.barChartData.datasets.push(dataset1);
    this.barChartData.datasets.push(dataset2);

  }

  constructor() {
    this.setData();
  }
}

如果需要，我可以提供我案例的 Stackblitz 示例。 提前致谢！