奇怪的图表最大轴x值（真正挑战） [英] Weird chart maximum axis x value (Real Challenge)
问题描述
在这里，您可以看到使用graphael创建的图表。 http://jsfiddle.net/aNJxf/4/
它的y轴是正确的。
第一个y值为0.03100，y轴最大值为0.031
我们将值改为0.03104，y轴上的最大值变为1.03，现在我们所有的点都在底部。
如果我们添加另一个0.00001，这使得值0.03105，轴y的最大值变为0.531，现在我们的点显示在 错误 图表。
当graphael计算最大y轴值时，似乎发生了错误。
为什么会发生这种情况？
我粘贴的代码是
var r = Raphael（holder），
txtattr = {font：12px sans-serif};
var x = []，y = []，y2 = []，y3 = [];
for（var i = 0; i <1e6; i ++）{
x [i] = i * 10;
y [i] =（y [i-1] || 0）+（Math.random（）* 7）
}
var demoX = [[1，2，3，4，5，6，7]，[3.5,4.5,5.5,6.5,7,8]];
var demoY = [[12，32，23，15，17，27，22]，[10，20，30，25，15，28]];
var xVals = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25， 26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50， 51,52,53,54,55,56,57,58];
var yVals = [0.03100,0.02259,0.02623,0.01967,0.01967,0.00788,0.02217,0.0137,0.01237,0.01764,0.0131,0.00942,0.0076,0.01463,0.02882,0.02093,0.02502,0.01961,0.01551,0.02227,0.0164， 0.0191,0.00774,0.03076,0.0281,0.01338,0.02763,0.02334,0.00557,0.00023,0.01523,0.0263,0.03077,0.02404,0.02492,0.01954,0.01954,0.02337,0.01715,0.02271,0.00815,0.01343,0.00985,0.01837,0.00749,0.02967， 0.01156,0.0083,0.00209,0.01538,0.01348,0.01353];
//r.text(160，10，符号，轴和悬停效果）。attr（txtattr）;
var lines = r.linechart（10，10，300，220，xVals，yVals，{nostroke：false，axis：0 0 1 1，symbol：circle，smooth：true}）
.hoverColumn（function（）{
this.tags = r.set（）;
for（var i = 0，ii = this.y.length; i
}
}，function（）{
this。标签&& this.tags.remove（）;
}）;
lines.symbols.attr（{r：3}）;
感谢
yVals 转换成整数（乘以 1e5 ）似乎摆脱了你的图表的尴尬行为。 这表明它可能与gRaphael用来寻找最大轴值（如您在您的相关问题中提出的），当您的值是小的十进制值（和更重要的数字）。
我知道浮点精度有固有的问题，但我不能确定适用于你的情况，或者你的值足够低， this。
不是最好的解决方法，但如果对你来说可行，你可以显示 yValues 更大的数量级，并且提醒观看者他们实际上小于呈现的。例如，您的图表可以从0到3100，并提醒您的观众比例尺为 scale * 1e-5 。
Here you can see a chart created using graphael. http://jsfiddle.net/aNJxf/4/
It is shown with it's y axis correctly.
The first y value is 0.03100 and the maximum value at y axis is at 0.031 If we change the value to 0.03104 the maximum value at y axis becomes 1.03 and now all our points are in the bottom. If we add another 0.00001, which makes that value 0.03105, the maximum at the axis y becomes 0.531 and now our points are shown at the wrong position of the chart. It seems that something is going wrong while graphael calculates the maximum y axis value.
Why this happens? And how we can fix that?
The code that I have pasted there is
var r = Raphael("holder"),
txtattr = { font: "12px sans-serif" };
var x = [], y = [], y2 = [], y3 = [];
for (var i = 0; i < 1e6; i++) {
x[i] = i * 10;
y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
}
var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]];
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]];
var xVals =[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58];
var yVals = [0.03100,0.02259,0.02623,0.01967,0.01967,0.00788,0.02217,0.0137,0.01237,0.01764,0.0131,0.00942,0.0076,0.01463,0.02882,0.02093,0.02502,0.01961,0.01551,0.02227,0.0164,0.0191,0.00774,0.03076,0.0281,0.01338,0.02763,0.02334,0.00557,0.00023,0.01523,0.0263,0.03077,0.02404,0.02492,0.01954,0.01954,0.02337,0.01715,0.02271,0.00815,0.01343,0.00985,0.01837,0.00749,0.02967,0.01156,0.0083,0.00209,0.01538,0.01348,0.01353];
//r.text(160, 10, "Symbols, axis and hover effect").attr(txtattr);
var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});
lines.symbols.attr({ r: 3 });
Thanks
Sorry, I'm not real familiar with gRaphael, but I did find that converting your yVals into whole numbers (by multiplying each by 1e5) seemed to rid your chart of the awkward behavior.
This suggests that it could be related to the algorithm gRaphael uses to find the max axis value (as you ask in your related question) when your values are small decimal values (and alter at even more significant digits).
I know there are inherent issues with float precision, but I can't be sure that applies to your case, or that your values are low enough to consider this.
Not the best workaround, but if it would be feasible for you, you could display the yValues in an order of magnitude larger, and remind the viewer that they are actually smaller than presented. For example, your chart could go from 0 to 3100 and remind your viewer that the scale is scale * 1e-5.
这篇关于奇怪的图表最大轴x值（真正挑战）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
