减少chart.js中的Y轴

Question

我有一张可以正确输出信息的图表，但是它太高了。 我看了看文档，找不到找到使Y轴“更小”的方法。 通过这个，我的意思是改变其计算方式-因此在此屏幕截图中，它的增量为10s。 是否可以将其增加20秒？ 所以我有三个Y轴点？ 这将降低高度。

作为参考，Google Analytics（分析）输出数据的方式是一种很好的方法。 他们的图表美观大方，为周围的其他内容留出了空间。

Answer 1

您可以使用y轴刻度的stepSize属性。 通过将此属性设置为值（间隔） 20将减少在y轴上的刻度计数。

scales: {
   yAxes: [{
      ticks: {
         stepSize: 20
      }
   }]
}

ᴅᴇᴍᴏ

 var chart = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'LINE', data: [10, 30, 20, 50, 60], backgroundColor: 'rgba(0, 119, 290, 0.2)', borderColor: 'rgba(0, 119, 290, 0.6)', fill: false }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, stepSize: 20 //<-- set this } }] } } }); 

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

Answer 2

我正面临类似的问题。 @GRUNT的解决方案无法解决我的问题。 stepSize将设置两个步骤之间的差异。 我想缩小两个步骤之间的距离。 有什么解决办法吗？