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

Question

我有这个图表:

...它完全按照我想要的方式显示，但有一个异常(exception)...条形中的数据是 x 轴上两次之间的数据...因此所有标签都需要移动以位于网格上线，而不是条形图默认的线之间。所以红色和蓝色条是 8:00 到 9:00 之间的数据。我希望我已经解释得足够清楚了。

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

Answer 1

您可以使用Plugin Core API将刻度标签直接绘制到 Canvas 上的所需位置。 。它提供了许多可用于执行自定义代码的 Hook 。在下面的代码片段中，我使用 afterDraw Hook 在 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>