Chartjs混合条形图/折线图条形宽度与其他列重叠

Question

我的日期图表包含一行和一个条形数据集。

我遇到的问题是条形宽度与其他列重叠，因为条形数据集通常为零。

您可以看到两个柱与6月4列重叠。

如果我连续两天添加一个条形值，它将正确调整条形宽度。

现在条形宽度会针对每天的列进行调整。

如果有更多天数，条形宽度变得最差：

您可以看到，在此图表中，条形宽度似乎与x axys中的4天重叠。

您可以在此处查看示例代码：https://codepen.io/anon/pen/eKdjay?editors=1010

取消注释第38行的js代码，看看条宽度如何调整。

这是我用来初始化图表的代码。

new Chart($('#chart'), {
type: 'bar',
  data: {
    labels: [],
    datasets: [
      {
        label: "Reach",
        data: reachData,
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgb(255, 99, 132)',
        borderWidth: 3,
        fill: false,
        lineTension: 0,
        yAxisID: 'y-axis-right',
        type: 'line'
      }, {
        label: "Interactions",
        data: interactionsData,
        borderColor: 'rgb(139, 195, 74)',
        backgroundColor: 'rgb(139, 195, 74)',
        borderWidth: 3,
        fill: false,
        xAxisId: 'x-axis',
        lineTension: 0
      }
    ]
  },
  options: {
    bezierCurve : false,
    tooltips: {
      position: 'nearest',
      mode: 'index',
      intersect: false,
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          format: 'MM/DD/YYYY',
          unit: 'day',
          tooltipFormat: 'll'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        type: 'linear',
        display: true,
        position: 'left',
        id: 'y-axis-left',
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: "Reach",
          fontColor: 'rgb(54, 162, 235)'
        }
      }, {
        type: 'linear',
        display: true,
        position: 'right',
        id: 'y-axis-right',
        ticks: {
          beginAtZero: true,
        },
        gridLines: {
          drawOnChartArea: false,
        },
        scaleLabel: {
          display: true,
          labelString: "Interactions",
          fontColor: 'rgb(255, 99, 132)'
        }
      }]
    }
  }
});