javascript - 绘制条形图 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 的下一个date 将聚集到数据集 1 中，使其看起来确实属于该日期。

任何帮助将不胜感激

Answer 1

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

在您的 xAxes 中，您需要添加一个额外的配置选项:

xAxes: [{
    offset: true
}]

ChartJS 文档中的描述:

If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true in the bar chart by default.

ChartJS Documentation Cartesian