繪制條形圖.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文檔Cartesian