确定条形图数据集之间相等增量的最佳方法

Question

我正在开发一个使用 HTML canvas 的图表库。 到目前为止，我有一个条形图，但它有一个错误。 目前，y 增量始终为 100。因此，如果数据集为[100, 200, 300, 400, 500] ，则图形如下所示：

但如果我将数据集更改为[10, 20, 30, 40, 50] ，则 y 增量仍为 100。图表如下所示：

有人可以用一种算法帮助我，让它在查看数据后确定最佳 y 增量。 到目前为止，我什么也做不了。

如果您需要更多信息，请告诉我！

谢谢！

PS 如果有帮助，github 是： TalinTheDev/TheCharts

Answer 1

问题是由代码中的这一行引起的：

const yMax = Math.ceil(parseInt(Math.max(...this.data.y.Data)) / 100) * 100;

让我们看一些实际数据。 如果data.y.Data包含以下值：

[10, 20, 30, 40, 50]

上述算法parseInt(Math.max(...this.data.y.Data))的第一部分将发现50是数组中最高的 integer 数。 代码的下一位将其除以 100 ，因此 50 变为0.5 。 然后将该数字包装在对Math.ceil()的调用中，该调用基本上将 0.5 舍入到下一个 integer 1 。 最后将其乘以 100 会导致100是最高的 integer 数 - 这是无稽之谈。

好吧，我确定您只是放错了右括号，因此只需将上面的行更改为：

const yMax = Math.ceil(parseInt(Math.max(...this.data.y.Data)) / 100 * 100);