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

我有这个图表：

…这正是我想要的结果，只有一个例外。。。条形图中的数据在x轴上的两次之间。。。因此，所有标签都需要移动到网格线上，而不是在它们之间，这是条形图的默认设置。因此，红色和蓝色条是8:00和9:00之间的数据。我希望我已经解释清楚了

---

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

您可以使用。它提供了可用于执行自定义代码的挂钩数量。在下面的代码片段中，我使用

afterDraw

hook在

xAxis

上绘制自己的标签

const hours=['00'，'01'，'02'，'03'，'04'，'05'，'06']；
常量值=[0,0,0,0,10,6,0]；
常量图表=新图表（document.getElementById（'myChart'）{
类型：'bar'，
插件：[{
后绘图：图表=>{
var xAxis=图表刻度['x轴-0']；
var tickdestance=xAxis.width/（xAxis.ticks.length-1）；
xAxis.ticks.forEach（（值，索引）=>{
如果（索引>0）{
var x=-tickDistance+tickDistance*0.66+tickDistance*指数；
变量y=图表高度-10；
chart.ctx.save（）；
chart.ctx.fillText（值='0am'？'12am'：值，x，y）；
chart.ctx.restore（）；
}
});      
}
}],
数据：{
标签：小时，
数据集：[{
标签：“数据集1”，
数据：价值观，
类别类别：0.99，
百分之0.99，
背景颜色：“蓝色”
}]
},
选项：{
回答：是的，
图例：{
显示：假
},   
比例：{
xAxes：[{
键入：“时间”，
时间：{
解析器：“HH”，
单位：小时，
显示格式：{
小时：“哈”
},
tooltipFormat:'Ha'
},
网格线：{
偏移网格线：真
},
滴答声：{
最小：力矩（小时[0]，'HH'）。减去（1，'h'），
fontColor:“白色”
}
}]
}
}
});
完美！我会试试这个，然后回来报到！谢谢