如何设置Y轴上显示的最高值的下限？

Question

我有一个chart.js折线图，其中Y值是0-100之间的百分比，X轴表示过去一分钟的时间（秒）。使用来自每五秒更新一次的套接字连接的实时数据填充图表。

我遇到了由chart.js动态生成的Y轴步骤的问题。在大多数情况下，一切都很好，Y轴根据当前显示的数据范围进行缩放。但是，当百分比为0％或介于0和1之间时，例如.654％，Y轴将显示最小值0和最大值1％。因此，该图表具有误导性，因为看起来该百分比是高的，而实际上它小于1％。

所以我的问题是：如何设置沿Y轴显示的最大值的最小值？

（现在在你跳到结论并删除关于stepSize属性的一行之前，我已经尝试将stepSize设置为1和3之类的值。问题是，当百分比值跳到75％或更高时，所需的大量标签（75/3或75/1）最终使标签难以辨认）

Answer 1

您正在寻找y轴的suggestedMax刻度选项。像这样使用它：

options: {
  scales: {
    yAxes: [{
      ticks: {
        suggestedMax: 60
      }
    }]
  }
}

如果所有数据值都低于此值，则此刻度值将用作y轴的最大刻度。如果数据值高于此刻度值，则将自动计算并使用更高的刻度值。来自docs：

  

suggestedMax

     

用户定义的比例最大数量，   覆盖最大值，除非它低于最大值   值。

您可能会在行动here及以下内容中看到它。

＆＃13;

＆＃13;

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: 'Percentage',
      data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMax: 60
        }
      }]
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;