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

Question

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

我希望将标签放在 x 轴上方。

Answer 1

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

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

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

2. 隐藏当前 xAxes 刻度:

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

3. 将动画添加到选项配置中，并使用 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宽度并将其除以刻度标签的数量。这将告诉您每个条的宽度。然后，将该数字乘以当前的索引，将标签定位在正确的栏前面。最后，添加半条的宽度以使标签在条中居中。

   对于yOffset，从图表的高度开始，然后减去您想要将标签向上移动的距离。

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