Chart.js在条形图中的刻度线上显示x轴标签，不在两者之间

Question

我有这张图表：

...这正好显示我想要的方式，但有一个例外...条形图中的数据在x轴上两次之间...因此所有标签都需要移动才能位于网格线上，而不是条形图的默认值。因此，红色和蓝色条表示的是8:00至9:00之间的数据。我希望我已经解释得足够清楚了。

我正在浏览Chart.js文档，但似乎不可能！我知道我可以将标签更改为例如晚上8点至晚上9点，但这似乎在视觉上比较笨拙。有没有人知道实现这一目标的方法？理想情况下，最后一条垂直网格线上也会有另一个“ 12am”。

Answer 1

您可以使用canvas在所需位置直接将刻度线绘制到Plugin Core API上。它提供了许多用于执行自定义代码的挂钩。在下面的代码片段中，我使用afterDraw钩子在xAxis上绘制自己的标签。

const hours = ['00', '01', '02', '03', '04', '05', '06'];
const values = [0, 0, 0, 0, 10, 6, 0];

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {      
      var xAxis = chart.scales['x-axis-0'];
      var tickDistance = xAxis.width / (xAxis.ticks.length - 1);
      xAxis.ticks.forEach((value, index) => {
        if (index > 0) {
          var x = -tickDistance + tickDistance * 0.66 + tickDistance * index;
          var y = chart.height - 10;
          chart.ctx.save();        
          chart.ctx.fillText(value == '0am' ? '12am' : value, x, y);
          chart.ctx.restore();
        }
      });      
    }
  }],
  data: {
    labels: hours,
    datasets: [{
      label: 'Dataset 1',
      data: values,
      categoryPercentage: 0.99,
      barPercentage: 0.99,
      backgroundColor: 'blue'
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },   
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          parser: 'HH',
          unit: 'hour',
          displayFormats: {
            hour: 'Ha'
          },
          tooltipFormat: 'Ha'
        },
        gridLines: {
          offsetGridLines: true
        },
        ticks: {
          min: moment(hours[0], 'HH').subtract(1, 'hours'),
          fontColor: 'white'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>