javascript - 如何更改 Chart.js 中的 x 轴标签位置

Question

是否可以更改标签位置，如 CSS 中的填充或边距？

我希望标签位于 x 轴上方。

Answer 1

您可以通过以下步骤更改 xAxes 标签位置:

1. 将 .getContext("2d") 添加到获取 ctx Canvas 对象的调用中:

   var ctx = document.getElementById("gescanntePackzettelChart").getContext("2d");
   

2. 隐藏当前 xAxes ticks:

   xAxes: [{
       ticks: {
           display: false
       }
   }
   

3. 在options 配置中添加一个animation，并使用canvas fillText()创建新标签的方法:

   animation: {
       duration: 1,
       onComplete: function() {
           var controller = this.chart.controller;
           var chart = controller.chart;
           var xAxis = controller.scales['x-axis-0'];
   
           var numTicks = xAxis.ticks.length;        
           var xOffsetStart = xAxis.width / numTicks;
           var halfBarWidth = (xAxis.width / (numTicks * 2));
   
           xAxis.ticks.forEach(function(value, index) {
               var xOffset = (xOffsetStart * index) + halfBarWidth;
               var yOffset = chart.height - 20;
               ctx.fillText(value, xOffset, yOffset);
           });
   
       }
   }
   

   对于 xOffset，要找出正确的位置，请取 xAxis 宽度并将其除以刻度标签的数量。这将告诉您每个条的宽度。然后，将该数字乘以当前 index 以将标签定位在正确栏的前面。最后，添加半个条形的宽度以使标签在条形中居中。

   对于 yOffset，从图表的高度开始并减去您想要向上移动标签的量。

工作 JSFiddle:https://jsfiddle.net/m5tnkr4n/124