javascript - Chart.js - 设置最大 Y 轴值并保持步骤正确

Question

我正在使用 Chart.js 2.6。我有一个图表，我在其中添加了自定义分页以逐步浏览数据集，因为它非常大。我的分页和一切都运行良好，我只需获取集合中的下一个数据 block 并使用新数据对象更新 Chart.config.data，然后在图表上调用 .update() 。但是，为了使图表有意义，我需要在用户分页时保持左侧(Y 轴)比例相同。通常 Chart.js 会根据图表中的数据重建它，但我希望它始终反射(reflect)相同的值。

我已将图表 yAxes 对象上的 max 值设置为数据集中的最大值。我还将 beginAtZero 选项设置为 true，将 maxTicksLimit 设置为 10。但是，即使我的 Yaxis 保持不变，它看起来并不总是那么好(请参见下面的屏幕截图)。在此示例中，图表中的最大值设置为 21,000。有没有人对我如何提供更好的最大值(根据值向上舍入到下一个 5,000、500、100 等)或某种方式让它创建 Y 轴而不用以这种方式处理顶部数字有任何建议现在可以了吗？

这是我当前用于确定要设置为图表中 Yaxes 对象中的最大值的最大数据值的函数。 plugin.settings.chartData 变量表示图表中使用的数据值的数组。我试图让它根据 maxValue 正确地增加到下一个 1000、500 等，但正如你所看到的，我的数学不正确。在屏幕截图示例中，maxValue 返回为 20,750，我的函数将其四舍五入为 21,000。在此示例中，它应该将其四舍五入到下一个增量，即 25,000。

var determineMaxDataValue = function() {
    var maxValue = Math.max.apply(Math, plugin.settings.chartData);
    var step = maxValue > 1000 ? 1000 : 500;
    plugin.settings.maxDataValue = (Math.ceil(maxValue / step) * step);             
};

Answer 1

我也遇到了同样的问题。您无需编写任何特殊函数来确定 Yaxes 中的最大值。使用“suggestedMax”设置。不要将“max”设置为图表中的最大值，而是将 suggestMax 设置为图表中的最大值。如果您设置了“步长”，这将永远不起作用。

options: {
 scales: {
  yAxes: [{
    ticks: {
     suggestedMax: maxvalue+20
     }
   }]
  }
}

添加20，以便最大值的工具提示清晰可见。

有关更多信息，请参阅http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings