如何设置在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轴的最大刻度。 如果数据值高于此报价值，则将自动计算并使用较高的报价值。 从文档 ：

suggestedMax

用户定义的刻度的最大数字，将覆盖最大值，除非该数字小于最大值。

您可能会在这里和下面看到它的实际效果。

 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 } }] } } }); 

 <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>