我正在使用Raphael.js帮助创建Stripchart，但不幸的是它没有在IE8中显示实际数据。图表的网格正在显示，但就是这样。代码中是否有任何内容突然显示为什么这可能是一个问题？只是想找第二眼，谢谢！
/*
* accelerometer charts, needs raphael-min.js
*/
function Stripchart(element) {
var ret = new SChart(element);
return ret;
}
function SChart(element) {
vpwidth = element.offsetWidth;
vpheight = element.offsetHeight;
tzero = 0;
mspertick = 100.0;
bwidth = 0;
bheight = 0;
mgperpx = 1000.0 / 30.0;
chanwidth = 2;
labelheight = 8;
labelevery = 30000;
arraymax = vpwidth * (mspertick/5) * 2;
xchan = new Array(arraymax);
ychan = new Array(arraymax);
zchan = new Array(arraymax);
clock = new Array(arraymax);
head = 0;
tail = 0;
Paper = Raphael(element, vpwidth, vpheight);
this.svg_line = function(x1, y1, x2, y2) {
var ret = "M" + parseInt(x1) + " " + parseInt(y1) + " L" + parseInt(x2) + " " + parseInt(y2);
return ret;
}
this.clear = function() {
Paper.clear();
}
this.draw_grid = function(torigin) {
epsilon = this.clockToTick(torigin-tzero) % 10;
yzero = vpheight / 2;
tline = 0;
tlast = (parseInt(torigin/labelevery) + 1) * labelevery;
for (i = vpwidth-bwidth - epsilon ; i > bwidth; i-= 10) {
svg = this.svg_line(i, bheight, i, vpheight-bheight);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = 0; i < torigin-tzero; i += labelevery) {
if(i > torigin - this.tickToClock(vpwidth-bwidth*2) - tzero) {
xpos = vpwidth - bwidth - this.clockToTick(torigin - tzero - i);
minutes = parseInt(i/60000);
seconds = parseInt((i%60000)/1000);
if(seconds < 10) {
seconds = "0" + seconds;
}
timestring = "" + minutes + ":" + seconds;
Paper.text(xpos, vpheight-bheight-(labelheight/2)-1, timestring);
}
}
for (i = yzero; i > bheight; i -= 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = yzero; i < vpheight-bheight; i += 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
var svg = this.svg_line(bwidth, yzero, vpwidth-bwidth, yzero);
var l = Paper.path(svg);
l.attr("stroke-width", "1");
l.attr("stroke", "#ddd");
l.attr("opacity", 0.75);
var r = Paper.rect(bwidth, bheight, vpwidth-bwidth*2, vpheight-bheight*2);
r.attr("stroke-width", "2");
r.attr("stroke", "#ccc");
r.attr("opacity", 0.75);
}
this.draw_channel = function(data, color) {
var now;
var svg_path = ""
var mean_datum = 0;
var this_tick;
var prev_tick;
var count;
var xorig = vpwidth-bwidth;
var yorig = vpheight / 2;
// this.text(150, 40, "head = " + head + " tail = " + tail);
if (head == tail) {
return;
}
i = this.prev(head);
now = this.clockToTick(clock[i]);
prev_tick = now;
count = 0;
mean_datum = 0;
// this.text(150, 30, now + " " + i);
// console.log("Start " + this.prev(head) + " end " + this.prev(tail) + " max " + arraymax);
for(i = this.prev(head); i != this.prev(tail); i = this.prev(i)) {
this_tick = this.clockToTick(clock[i]);
if(this_tick == prev_tick) {
mean_datum += data[i];
++count;
} else {
mean_datum = parseInt(mean_datum / count);
if(svg_path.length == 0) {
svg_path = "M";
} else {
svg_path += "L";
}
svg_path += parseInt(xorig - now + prev_tick) + " ";
yplot = yorig - this.chanToPx(mean_datum);
if(yplot < 1) {
yplot = 1;
} else if(yplot > vpheight - bheight) {
yplot = vpheight - bheight;
}
svg_path += parseInt(yplot);
mean_datum = data[i];
count = 1;
prev_tick = this_tick;
}
if(xorig - now + this_tick <= bwidth) {
break;
}
}
var chan_path = Paper.path(svg_path);
if(color == "#00f") {
// console.log(svg_path);
}
chan_path.attr("stroke", color);
chan_path.attr("stroke-path", 1);
chan_path.attr("stroke-width", chanwidth);
chan_path.attr("opacity", 0.9);
}
this.text = function(x, y, s) {
Paper.text(x, y, s);
}
this.prev = function(index) {
var ret;
ret = index - 1;
if(ret <= 0) {
ret += arraymax;
}
return ret;
}
this.next = function(index) {
var ret;
ret = index + 1;
if(ret >= arraymax) {
ret -= arraymax;
}
return ret;
}
this.dequeue = function() {
if(head != tail) {
tail = this.next(tail);
}
}
this.enqueue = function() {
var ret = head;
head = this.next(head);
// detect collision
if(this.next(head) == tail) {
this.dequeue();
}
return ret;
}
this.add_datum = function(time, x, y, z) {
// assume java applet has already handled clock rollover
var entry = this.enqueue();
if(tzero == 0) {
tzero = parseInt(time);
}
clock[entry] = parseInt(time);
xchan[entry] = parseInt(x);
ychan[entry] = parseInt(y);
zchan[entry] = parseInt(z);
// console.log("Adding datum " + entry + " head " + head + " tail " + tail);
// clock[head] = parseInt((parseInt(time) + (mspertick / 2)) / mspertick);
// xchan[head] = parseInt((parseInt(x) + (mgperpx / 2)) / mgperpx);
// ychan[head] = parseInt((parseInt(y) + (mgperpx / 2)) / mgperpx);
// zchan[head] = parseInt((parseInt(z) + (mgperpx / 2)) / mgperpx);
// this.text(150, 30, "(" + clock[head] + ", " + xchan[head] + ", " + ychan[head] + ", " + zchan[head] + ")");
// while(clock[head] - clock[tail] > vpwidth - (bwidth * 2)) {
// tail++;
// if (tail >= arraymax) {
// tail -= arraymax;
// }
// }
}
this.tickToClock = function(tick) {
ret = tick * mspertick;
return ret;
}
this.clockToTick = function(clock_ms) {
ret = parseInt(((mspertick / 2) + clock_ms) / mspertick);
return ret;
}
this.chanToPx = function(chan) {
ret = parseInt((chan + (mgperpx / 2)) / mgperpx);
return ret;
}
this.draw = function() {
var top = this.prev(head);
this.clear();
this.draw_grid(clock[top]);
this.draw_channel(xchan, "#00f");
this.draw_channel(ychan, "#0f0");
this.draw_channel(zchan, "#f00");
}
this.reset = function() {
tzero = 0;
head = 0;
tail = 0;
}
this.add_test_datum = function(tick) {
// add some jitter +/- 16ms
time = tick * mspertick + 16 - Math.floor(Math.random() * 32);
x = Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
y = 1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
z = -1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
time = "" + time;
x = "" + x;
y = "" + y;
z = "" + z;
this.add_datum(time, x, y, z);
}
this.test_animate = function(self) {
var tid;
var tcount = 0;
var tmax = 500;
function interval_display() {
for (i=0 ; i<10; i++) {
tcount++;
self.add_test_datum(tcount);
}
self.draw(tcount);
if(tcount > tmax) {
clearInterval(tid);
}
}
tid = setInterval(interval_display, 2500);
}
}