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（所以基本上是第一点和最后一点）不会被绘制。

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

此外，我正在使用这个时间序列版本，因为我希望有＆＃34;差距＆＃34;在图表中，例如，数据集1可能具有2017-03-01的系列，而数据集2可能没有，在这种情况下，数据集2的下一个日期将聚集到数据集1，使其看起来像它确实属于那个日期。

任何帮助将不胜感激

Answer 1

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

您需要在xAxes内添加其他配置选项：

xAxes: [{
    offset: true
}]

ChartJS文档中的描述：

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

ChartJS Documentation Cartesian

绘制条形图.js时间序列

1 个答案: