不幸的是，没有一种方法可以“配置”图表来实现您想要的。这一切都与折线图比例绘制的工作原理有关。话虽如此，您仍然可以通过使用一些“虚拟”数据欺骗chart.js来实现此行为。
基本上，您创建了一个“虚拟”的第一个和最后一个标签。然后将相应的“虚拟”第一个和最后一个值添加到条形数据数组中（此数据将永远不会显示）。然后将相应的“dummy”第一个和最后一个值添加到您的线数据数组中，但请确保您将该值设置为与下一个/上一个值相同，以直线结束（否则您的线将在开始和结束时形成Angular ）。我的意思是。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['dummy1', 'Jan 21st', 'Feb 21st', 'Mar 21st', 'Apr 21st', 'dummy2'],
    datasets: [
      {
        type: 'bar',
        label: 'A',
        // the 1st and last value are placeholders and never get displayed on the chart
        data: [0, 10, 25, 18, 37, 0],
      },
      {
        type: 'line', 
        label: 'B',
        // the 1st and last value are placeholders and never get displayed on the chart
        // to get a straight line, the 1st and last values must match the same value as
        // the next/prev respectively
        data: [25, 25, 25, 25, 25, 25],
        fill: false,
        borderWidth: 1,
        borderColor: '#f00',
        borderDash: [5,4],
        lineTension: 0,
        steppedLine: true
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],  
      xAxes: [{
        // exclude the 1st and last label placeholders by specifying the min/mix ticks
        ticks: {
          min: 'Jan 21st',
          max: 'Apr 21st',
        }
      }],
    }
  }
});

检查这个codepen example以查看它的实际操作。