使用gRaphael绘制毫秒级别的线图时,常常会出现数据点放置不一致的情况。最常见的是初始数据点在y轴左侧(如下面的fiddle中所示),有时最后一个数据点将超出视图框/超出x轴的终止点。
有人知道: 1)为什么会发生这种情况, 2)如何预防它, 3)如何检查它(如果我知道它已经发生了/超过了多少,我可以使用transform移动线条/点)。
我的代码:
有人知道: 1)为什么会发生这种情况, 2)如何预防它, 3)如何检查它(如果我知道它已经发生了/超过了多少,我可以使用transform移动线条/点)。
我的代码:
var r = Raphael("holder"),
txtattr = { font: "12px sans-serif" };
var r2 = Raphael("holder2"),
txtattr2 = { 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 = [1288885800000, 1289929440000, 1290094500000, 1290439560000, 1300721700000, 1359499228000, 1359499308000, 1359499372000];
var yVals = [80, 76, 70, 74, 74, 78, 77, 72];
var xVals2 = [1288885800000, 1289929440000];
var yVals2 = [80, 76];
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 });
var lines2 = r2.linechart(10, 10, 300, 220, xVals2, yVals2, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () {
this.tags = r2.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();
});
lines2.symbols.attr({ r: 3 });
我需要使用gRaphael,并且x轴的单位必须为毫秒(稍后会使用自定义日期字符串标记它)。
主要示例fiddle:http://jsfiddle.net/kcar/aNJxf/
次要示例fiddle(页面上第4个示例经常显示两个轴错误):http://jsfiddle.net/kcar/saBnT/
根本原因是snapEnds函数(g.raphael.js中的第718行),它做的舍入,在某些情况下,可以接受,在其他情况下,会从/添加年份。
尚未完全跟踪此点之后的所有内容,但由于每次舍入变得疯狂并且不是每次都不正确地放置数据点时,我将继续假定这会导致计算图表列时出现问题,还在发送到snapEnds之前的值确切无误只是确认其不仅是接收了错误的数据。
来自g.raphael.js的该函数代码:
snapEnds: function(from, to, steps) {
var f = from,
t = to;
if (f == t) {
return {from: f, to: t, power: 0};
}
function round(a) {
return Math.abs(a - .5) < .25 ? ~~(a) + .5 : Math.round(a);
}
var d = (t - f) / steps,
r = ~~(d),
R = r,
i = 0;
if (r) {
while (R) {
i--;
R = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
}
i ++;
} else {
if(d == 0 || !isFinite(d)) {
i = 1;
} else {
while (!r) {
i = i || 1;
r = ~~(d * Math.pow(10, i)) / Math.pow(10, i);
i++;
}
}
i && i--;
}
t = round(to * Math.pow(10, i)) / Math.pow(10, i);
if (t < to) {
t = round((to + .5) * Math.pow(10, i)) / Math.pow(10, i);
}
f = round((from - (i > 0 ? 0 : .5)) * Math.pow(10, i)) / Math.pow(10, i);
return { from: f, to: t, power: i };
},