chart.js中带有时间刻度的数据开始和结束处的空白

Question

我有一个带有时间刻度和特定unitSize的图表，以便每个标签仅显示6个标签。问题是它在图表的开始和结尾处都创建了空白。

（我可以通过将stepSize设置为1并将它们与callback属性一起过滤掉那些滴答声，只除去那些我想要但我不想的滴答声。）

这里是小提琴：Fiddle

    var chartTest = new Chart(ctxTest, {
    type: 'bar',
    data: chartTestData,
    options: {
      responsive: true,
      legend: false,
      title: {
        display: true
      },
      scales: {
        xAxes: [{
          barPercentage: 0.8,
          categoryPercentage: 1.0,
          gridLines: {
            display: true,
          },
          offset: true,
          type: 'time',
          time: {
            unit: 'hour',
            unitStepSize: 6,
            displayFormats: {
              'hour': 'HH'
            }
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true
          },
          scaleLabel: {
            display: true
          }
        }]
      }
    }
  });

Answer 1

通过将空值添加到您的第一个和最后一个x值中，有一种解决方法

fiddle here

var chartTestData = {
  labels: [
  '2017-08-16 23:00:00',
  '2017-08-17 00:00:00', '2017-08-17 01:00:00', '2017-08-17 02:00:00', '2017-08-17 03:00:00', '2017-08-17 04:00:00', '2017-08-17 05:00:00', '2017-08-17 06:00:00', '2017-08-17 07:00:00', '2017-08-17 08:00:00', '2017-08-17 09:00:00', '2017-08-17 10:00:00', '2017-08-17 11:00:00', '2017-08-17 12:00:00', '2017-08-17 13:00:00', '2017-08-17 14:00:00', '2017-08-17 15:00:00', '2017-08-17 16:00:00', '2017-08-17 17:00:00', '2017-08-17 18:00:00', '2017-08-17 19:00:00', '2017-08-17 20:00:00', '2017-08-17 21:00:00', '2017-08-17 22:00:00', '2017-08-17 23:00:00',
   '2017-08-18 00:00:00'
  ],
  datasets: [{
    label: 'Whatever',
    data: [
    null,
      1287.7695588,
      287.7695591,
      287.7695588,
      518.402393,
      349.3577694,
      985.989506,
      1068.015602,
      1630.221974,
      1616.020565,
      1583.739695,
      1593.674063,
      1543.705784,
      1634.344849,
      1671.942706,
      1740.257558,
      1835.411412,
      1655.565019,
      1345.900945,
      1286.365589,
      1156.972826,
      1131.793079,
      676.5477124,
      730.9662211,
      1623.7522991,
      null
    ],
    backgroundColor: '#a2c7db'
  }]
};

var ctxTest = document.getElementById("chartTest");
if (ctxTest) {
  var chartTest = new Chart(ctxTest, {
    type: 'bar',
    data: chartTestData,
    options: {
      responsive: true,
      legend: false,
      title: {
        display: true
      },
      scales: {
        xAxes: [{
          barPercentage: 0.8,
          categoryPercentage: 1.0,
          gridLines: {
            display: true,
          },
          offset: false,
          type: 'time',
          time: {
            unit: 'hour',
            unitStepSize: 6,
            displayFormats: {
              'hour': 'HH'
            }
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true
          },
          scaleLabel: {
            display: true
          }
        }]
      }
    }
  });
}