Chartjs：如何在刻度和刻度标签之间创建填充

gstyhher 于 2023-04-30 发布在 Chart.js

关注(0)|答案(1)|浏览(203)

我使用chartjs-node创建一个图形，并且我使用一个标签来表示Y轴。
我的问题是Y轴刻度和标签之间的距离很小，看起来不太好。我已经看过了文档，找不到任何对这个场景有用的东西。..在options -〉scales -〉yAxes -〉ticks -〉padding下面有一个选项，但它没有给予预期的效果。
目前我有一个解决方法，在options -〉scales -〉yAxes -〉ticks -〉callback我手动插入空格：callback: (val) => ${val}%``
这是可行的，但显然不是正确的用法，我相信如果比例是线性的，这种方法将禁止我使用线性比例可用的一些功能。
有人知道我如何以更优雅的方式创建刻度和标签之间的分离吗？

chart.js

来源：https://stackoverflow.com/questions/45307890/chartjs-how-to-create-padding-between-ticks-and-scale-label

1条答案

按热度按时间

hm2xizp91#

可以通过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>

赞(0）回复(0）举报 2023-04-30

我来回答

Chartjs：如何在刻度和刻度标签之间创建填充

1条答案

相关问题

热门标签

最新问答