奇怪的图表最大轴x值(真实挑战)

时间:2014-01-13 17:25:29

标签: javascript charts raphael graphael

在这里,您可以看到使用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) - 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 });

由于

1 个答案:

答案 0 :(得分:0)

抱歉,我对gRaphael并不熟悉,但我确实发现将yVals转换为整数(通过乘以1e5)似乎可以摆脱你的图表中的尴尬行为。

这表明它可能与gRaphael用于查找最大轴值的算法(正如您在your related question中所要求的)当您的值是小的十进制值(并且更改为更高位数)时。< / p>

我知道浮点精度存在固有问题,但我不能确定这适用于您的情况,或者您的值足够低以考虑这一点。

不是最好的解决方法,但如果它对您来说可行,您可以将yValues显示为更大的数量级,并提醒观众他们实际上比呈现的更小。例如,您的图表可能会从0到3100,并提醒您的查看器缩放为scale * 1e-5