chart.js - 减少 Chart.js 中的 Y 轴

Question

我有一个图表可以正确输出信息，但它太高了。我查看了文档，但找不到使 Y 轴“更小”的方法。我的意思是改变它的计算方式 - 所以在这个屏幕截图中它增加了 10 秒。是否可以将其增加 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>