绘制条形图.js 时间序列

Question

我正在尝试在时间序列上绘制包含多个数据集的条形图，但是一些数据在此过程中丢失了。

为简单起见，我删除了 ajax 调用并绘制了一些数据：-

 var config = {
    type: 'bar',
    data: {
      datasets: [{
            label: "Dataset 1",
            data: [{
                x: new Date('2017-03-01'),
                y: 1
            }, {
                x: new Date('2017-03-02'),
                y: 2
            }, {
                x: new Date('2017-03-03'),
                y: 3
            }, {
                x: new Date('2017-03-04'),
                y: 4
            }],
            backgroundColor: "red"
        }, {
            label: "Dataset 2",
            data: [{
                x: new Date('2017-03-01'),
                y: 1
            }, {
                x: new Date('2017-03-02'),
                y: 2
            }, {
                x: new Date('2017-03-03'),
                y: 3
            }, {
                x: new Date('2017-03-04'),
                y: 4
            }],
            backgroundColor: "blue"
        }]
    },
    options: {
      scales: {
        xAxes: [{
          type: "time",
          time: {
            unit: 'day',
            round: 'day',
            displayFormats: {
              day: 'MMM D'
            }
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }

  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx, config);

使用上面的配置数据集1点1和数据集2点4（所以基本上是第一个和最后一个点）不会被绘制。

我在这里出错的任何想法？

此外，我正在使用这个时间序列版本，因为我希望图表中有“差距”，例如数据集 1 可能有 2017-03-01 的系列，而数据集 2 可能没有，在这种情况下，数据集 2 的下一个日期会成堆直到数据集 1 使它看起来确实属于该日期。

任何帮助，将不胜感激

Answer 1

在显示以时间为 X 轴的条形图时，我遇到了完全相同的问题。

在您的内部，您xAxes需要添加一个额外的配置选项：

xAxes: [{
    offset: true
}]

ChartJS 文档中的描述：

如果为 true，则将额外空间添加到两个边缘，并缩放轴以适应图表区域。默认情况下，这在条形图中设置为 true。

ChartJS 文档笛卡尔