Chart.jsのx軸ラベルの位置を変更する方法

Question

CSSのパディングや余白のようなラベルの位置を変更することはできますか？

x軸の上にラベルが付いています。

Answer 1

あなたは以下の手順でxAxesラベルの位置変更することができます。ctxキャンバスオブジェクトを取得し、通話に.getContext("2d")を追加

1. を：

   ：

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

2. は現在xAxes ticksを隠します

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

3. はoptions設定にanimationを追加し、新しいラベルを作成するために、キャンバス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 yOffsetStart = xAxis.width/numTicks; 
        var halfBarWidth = (xAxis.width/(numTicks * 2)); 
   
        xAxis.ticks.forEach(function(value, index) { 
         var xOffset = chart.height - 20; 
         var yOffset = (yOffsetStart * index) + halfBarWidth; 
         ctx.fillText(value, yOffset, xOffset); 
        }); 
   
       } 
   } 
   

   をxOffsetについては、グラフの高さから始めて、しかしずっとあなたがアップし、ラベルを移動したい引きます。

   yOffsetの場合、正確な位置を把握するには、xAxisの幅を目盛りラベルの数で割ってください。これは、各バーの幅がどのくらいあるかを示します。次に、その番号に現在のindexを掛けて、正しいバーの前にラベルを置きます。最後に、バーの半分の幅を加えて、ラベルをバーの中央に配置します。

ワーキングJSFiddle：https://jsfiddle.net/m5tnkr4n/6/