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

【问题标题】：Chart.js display x axis labels ON ticks in bar chart, not betweenChart.js 在条形图中显示 x 轴标签，而不是在刻度之间
【发布时间】：2020-02-13 21:44:21
【问题描述】：

我有这张图表：

...除了一个例外，它准确地显示了我想要的方式...条形图中的数据在 x 轴上的两次之间...所以所有标签都需要移动以位于网格上线，而不是它们之间的默认条形图。所以红色和蓝色条是 8:00 到 9:00 之间的数据。我希望我已经解释得足够清楚了。

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

【问题讨论】：

标签： chart.js

【解决方案1】：

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

【讨论】：

完美！会试试这个并报告！谢谢！