绘制条形图.js 时间序列答案

【问题标题】：plot a bar chart.js time series绘制条形图.js 时间序列
【发布时间】：2018-04-17 08:13:46
【问题描述】：

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

为简单起见，我删除了 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 合并，使其看起来确实属于该日期。

任何帮助将不胜感激

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

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

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

xAxes: [{
    offset: true
}]

ChartJS 文档中的描述：

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

ChartJS Documentation Cartesian

【讨论】：