javascript - Chart.js - 它如何计算条形图上的 Y 轴？

Question

谁能告诉我 Chart.js 2.6+ 用于计算条形图中 Y 轴的数学逻辑？我创建了一个分页功能，允许我翻阅具有大量列的条形图。它工作得很好，只是我需要 Y 轴随着图表数据集的变化而保持不变。

为此，我获取图表的数据并创建它的子集，例如前 20 条记录，并将其作为数据对象提供给图表。为了使 Y 轴固定，我取完整数据集中的最大值并将其提供为 max ticks 中的值对于yAxes图表中的对象如下所示。

yAxes: [{
     ticks: {
          max:value_i_determine_here
     }
}]

这确实有效，但并不完美，因为 Chart.js 有时会创建过于紧密的步骤，从而导致图表如下所示。

如您所见，最高值为 1,900,000，因为我将其作为最大值提供。但是，我需要提供最大值作为我根据 Chart.js 确定应该使用的步骤确定的值。

所以我的问题是，Chart.js 如何计算在 Y 轴中使用哪些值？如果我知道这个逻辑，那么我会使用该逻辑根据我的完整数据集获取最大值，并提供该值作为最大值。

Answer 1

我最终要做的是编写一个函数，该函数将获取完整数据集中的最大值，并将其除以我提供给 Y 轴 maxTicksLimit 属性的值。然后，我通过复杂的 if/else if 条件运行该值，如下所示。

然后，我使用返回的 step 并将其作为 Y 轴 stepSize 属性提供给图表。看起来效果不错。如果有人有更好的解决方案，请告诉我，因为这是基于我的硬编码计算，我更喜欢一种更动态的方法。

var determineStepSize = function(maxDatasetValue) {
     var maxStepTemp = Math.ceil(maxDatasetValue / maxYAxisTicks);
     // Determine what the step should be based on the maxStepTemp value
     if (maxStepTemp > 4000000) step = 8000000;
     else if (maxStepTemp > 2000000) step = 4000000;
     else if (maxStepTemp > 1000000) step = 2000000;
     else if (maxStepTemp > 500000) step = 1000000;
     else if (maxStepTemp > 250000) step = 500000;
     else if (maxStepTemp > 100000) step = 200000;          
     else if (maxStepTemp > 50000) step = 100000;
     else if (maxStepTemp > 25000) step = 50000;
     else if (maxStepTemp > 10000) step = 20000;
     else if (maxStepTemp > 5000) step = 10000;
     else if (maxStepTemp > 2500) step = 5000;
     else if (maxStepTemp > 1000) step = 2000;
     else if (maxStepTemp > 500) step = 1000;
     else step = 500;                   
     return step;
};