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

Question

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

我遇到了由 Chart.js 动态生成 Y 轴步骤的问题。在大多数情况下，一切都很好，Y 轴根据当前显示的数据范围进行缩放。但是，当百分比为 0% 或介于 0 和 1 之间时(例如 0.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

User defined maximum number for the scale, overrides maximum value except for if it is lower than the maximum value.

您可能会看到它的实际效果 here及以下。

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>