Chart JS条形图中的Y轴限制？ [英] Y axis limit in Chart JS Bar chart?

问题描述

图表js条形图的Y轴限制是什么？

What is the Y-axis limit of chart js Bar charts?

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

I used 17 digit number and it displayed nothing in that chart.

推荐答案

y轴没有限制（数字类型可能不受javascript限制）

There is no limit on the y-axis (except possibly the javascript limit on the number type)

但是，您可能看到的可能是9007199254740992以上的精度损失-并非巧合的是17位数字（请参阅在不损失精度的情况下，Number可以使用的JavaScript的最大整数值是多少？问题

However, what you are possibly seeing might be a LOSS of precision above 9007199254740992 - which not so coincidentally is a 17 digit number (see What is JavaScript's highest integer value that a Number can go to without losing precision? and the associated problems

Chart.js使用值范围来确定如何缩放小节，方法是从最大值中减去最小值并使用差值。

Chart.js uses the value range to figure out how to scale the bars. It does this by subtracting the min from the max and using the difference.

现在，如果所有值都相同，Chart.js会添加一个小数（0.5）来产生变化，并继续进行该变化。

Now, if all values are same, Chart.js adds a small number (0.5) to make a difference and proceeds with this difference.

如果添加此0.5实际会产生差异，那么一切都很好-但是，如果结果高于9007199254740992，则大多数精度限制将吞噬它，并给出0差异并弄乱Chart.js的y轴

All is well and good if adding this 0.5 actually produces a difference - however if the result is above 9007199254740992, it will mostly get swallowed up by the precision limit giving a 0 difference and messing up Chart.js's y axis calculations.

当数字高于9007199254740992且它们的相差不够大时，会发生相同的问题（它们基本上将相同的数字取整->将它们视为一组相等的值->添加0.5->它通常会被精度限制所吞噬）

The same issue happens when the numbers are above 9007199254740992 and their difference is not large enough (they basically round up the same number -> they are treated as a set of equal values -> 0.5 is added -> it mostly get swallowed up by the precision limit)

这里是值的快速示例，以及为什么它会起作用/不起作用

Here's a quick sample of values and why it will work / not work

// 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或更高。

In short, your bar is not rendering because you have a set of values that are same (or do not significantly differ) AND are 9007199254740992 - 0.5 or above.

您可以添加一个虚拟值0以强制其呈现（或可能添加另一个虚拟序列0值），以确保两者之间存在显着差异-或者如果您所有的值都在17位范围内并且彼此非常接近，则只需绘制偏移量即可，例如您有1701和1705 ...绘制1和5并在工具提示中输入170作为值前缀。

You could just add a dummy value of 0 to force it to render (or possibly add another dummy series of 0 values) by making sure there is a significant difference - or if all your values are going to be in the 17 digit range and very close to each other, just plot the offset i.e. say you have 1701 and 1705... plot 1 and 5 and put in the 170 as a value prefix in the tooltip.

这篇关于Chart JS条形图中的Y轴限制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！