Chartjs：如何在刻度和刻度標籤之間創建填充

Question

我使用chartjs-node創建圖形，並使用Y軸的標籤。

我的問題是，Y軸刻度和標籤之間的距離很小，看起來不太好。我已經瀏覽了文檔，找不到任何對這種情況有用的東西... 選項 - >縮放 - > yAxes - >刻度 - >填充下有一個選項，但它沒有提供所需的效果。

目前，我有下選項的解決辦法 - >秤 - > yAxes - >蜱 - >回調我手動插入空格： callback: (val) => ` ${val}%`

這工作，但顯然是不正確的使用方法，我相信如果比例是線性的，這種方法將禁止我使用線性比例的一些可用特性。

任何人都知道如何以更優雅的方式創建刻度和標籤之間的分隔？

Answer 1

這可以通過使用y軸的afterFit回調函數來實現：

scales: { 
    yAxes: [{ 
     afterFit: function(scale) { 
     scale.width = 80 //<-- set value as you wish 
     }, 
     ... 
    }] 
} 

ɪɴᴀᴄᴛɪᴏɴ

var chart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
     label: 'LINE', 
 
     data: [3, 2, 4], 
 
     backgroundColor: 'rgba(0, 119, 290, 0.2)', 
 
     borderColor: 'rgba(0, 119, 290, 0.6)' 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
     yAxes: [{ 
 
      afterFit: function(scale) { 
 
       scale.width = 80 //<-- set value as you wish 
 
      }, 
 
      scaleLabel: { 
 
       display: true, 
 
       labelString: 'y-axis label', 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="ctx" height="180"></canvas>