Chart JS条形图中的Y轴限制？

Question

图表js条形图的Y轴限制是多少？

我使用了 17 位数字，但在该图表中没有显示任何内容。

Answer 1

y 轴没有限制（可能 javascript 数字类型限制除外）

但是，您可能看到的是 9007199254740992 以上的精度损失 - 这并非巧合是一个 17 位数字（请参阅 What is JavaScript's highest integer value that a Number can go to without losing precision? 和相关问题

Chart.js 使用值范围来确定如何缩放条形。它通过从最大值中减去最小值并使用差值来实现。

现在，如果所有值都相同，Chart.js 添加一个小数 (0.5) 以产生差异并继续进行此差异。

如果添加这个 0.5 实际上会产生差异，那么一切都很好 - 但是如果结果高于 9007199254740992，它大部分会被精度限制吞没，给出 0 差异并搞砸 Chart.js' y 轴计算。

当数字大于 9007199254740992 并且它们的差异不够大时会发生同样的问题（它们基本上对相同的数字进行四舍五入 -> 它们被视为一组相等的值 -> 添加 0.5 -> 它主要是被精度限制吞没）

这里有一个值的快速示例以及它为什么有效/无效

// works because there is a (small) difference and the numbers are < 9007199254740992
var a = [9007199254740991, 9007199254740992];

// won't work because there is no difference and the numbers are > 9007199254740992 - 0.5
var b = [9007199254740992, 9007199254740992];

// won't work because there is no difference and the numbers are = 9007199254740992 - 0.5
var c = [9007199254740991.5, 9007199254740991.5];

// works because there is no difference and the numbers are < 9007199254740992 - 0.5
var d = [9007199254740991.4, 9007199254740991.4];

// works because there is a significant difference even though the numbers are > 9007199254740992
var e = [12345678901234567890, 12345678901434567891];

// works because there is a significant difference even though the numbers are > 9007199254740992
var f = [0, 12345678901434567891];

// won't work because there is only a small difference and the numbers are > 9007199254740992
var g = [9007199254740992, 9007199254740993];

简而言之，您的条形图未呈现，因为您有一组相同（或没有显着差异）且为 9007199254740992 - 0.5 或更高的值。

您可以添加一个虚拟值 0 以强制渲染（或者可能添加另一个虚拟系列 0 值），方法是确保存在显着差异 - 或者如果您的所有值都将在17 位数字范围并且彼此非常接近，只需绘制偏移量即假设您有 1701 和 1705...绘制 1 和 5 并将 170 作为工具提示中的值前缀。

Chart JS条形图中的Y轴限制？

Y axis limit in Chart JS Bar chart?

bar-chart

chart.js