我创建了一个图表来显示对网页的访问。我有一切正常，但我想更改鼠标悬停在其中一个数据圈时出现的工具提示。
我正在使用Raphael JS并构建了以下内容： http://www.emirplicanic.com/php/php-visitor-tracking-script-with-jquery-and-raphael-javascript-library
如果您点击上面的链接并向下滚动到页面底部，这就是我的图表的工作方式。将鼠标悬停在其中一个圆上，您会发现它在一个框中显示数据。我想在框中添加一个箭头，例如引导工具提示。
如果你看这里： http://raphaeljs.com/analytics.html 并将鼠标悬停在其中一个圆圈上，您将看到差异。这就是我想要的。
要查看代码，请点击第一个链接，然后查看PHP Class (class.logger.php)部分，并在代码中查找function loadraphael。这是我假设我需要自定义，但不知道要改变什么。任何有关示例的帮助将不胜感激。
如果您需要我提供更多信息，请与我们联系。
编辑：这是代码。您会注意到我将rect更改为path。不确定我还应该改变什么。
//raphael.path.methods.js
Raphael.el.isAbsolute = true;
Raphael.el.absolutely = function () {
this.isAbsolute = 1;
return this;
};
Raphael.el.relatively = function () {
this.isAbsolute = 0;
return this;
};
Raphael.el.moveTo = function (x, y) {
this._last = {x: x, y: y};
return this.attr({path: this.attrs.path + ["m", "M"][+this.isAbsolute] + parseFloat(x) + " " + parseFloat(y)});
};
Raphael.el.lineTo = function (x, y) {
this._last = {x: x, y: y};
return this.attr({path: this.attrs.path + ["l", "L"][+this.isAbsolute] + parseFloat(x) + " " + parseFloat(y)});
};
Raphael.el.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x, y, angle) {
this._last = {x: x, y: y};
return this.attr({path: this.attrs.path + ["a", "A"][+this.isAbsolute] + [parseFloat(rx), parseFloat(ry), +angle, large_arc_flag, sweep_flag, parseFloat(x), parseFloat(y)].join(" ")});
};
Raphael.el.curveTo = function () {
var args = Array.prototype.splice.call(arguments, 0, arguments.length),
d = [0, 0, 0, 0, "s", 0, "c"][args.length] || "";
this.isAbsolute && (d = d.toUpperCase());
this._last = {x: args[args.length - 2], y: args[args.length - 1]};
return this.attr({path: this.attrs.path + d + args});
};
Raphael.el.cplineTo = function (x, y, w) {
this.attr({path: this.attrs.path + ["C", this._last.x + w, this._last.y, x - w, y, x, y]});
this._last = {x: x, y: y};
return this;
};
Raphael.el.qcurveTo = function () {
var d = [0, 1, "t", 3, "q"][arguments.length],
args = Array.prototype.splice.call(arguments, 0, arguments.length);
if (this.isAbsolute) {
d = d.toUpperCase();
}
this._last = {x: args[args.length - 2], y: args[args.length - 1]};
return this.attr({path: this.attrs.path + d + args});
};
Raphael.el.addRoundedCorner = function (r, dir) {
var rollback = this.isAbsolute;
rollback && this.relatively();
this._last = {x: r * (!!(dir.indexOf("r") + 1) * 2 - 1), y: r * (!!(dir.indexOf("d") + 1) * 2 - 1)};
this.arcTo(r, r, 0, {"lu": 1, "rd": 1, "ur": 1, "dl": 1}[dir] || 0, this._last.x, this._last.y);
rollback && this.absolutely();
return this;
};
Raphael.el.andClose = function () {
return this.attr({path: this.attrs.path + "z"});
};
//raphael analytics
Raphael.fn.drawGrid = function (x, y, w, h, wv, hv, color) {
color = color || "'.$fillcolor.'";
var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
rowHeight = h / hv,
columnWidth = w / wv;
for (var i = 1; i < hv; i++) {
path = path.concat(["M", x, y + i * rowHeight, "L", x + w, y + i * rowHeight]);
}
for (var i = 1; i < wv; i++) {
path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
}
return this.path(path.join(",")).attr({stroke: color});
};
$(function () {
$(".'.$tableid.'").css({
position: "absolute",
left: "-9999em",
top: "-9999em"
});
});
window.onload = function () {
// Grab the data
var labels = [],
data = [];
$(".'.$tableid.' tfoot th").each(function () {
labels.push($(this).html());
});
$(".'.$tableid.' tbody td").each(function () {
data.push($(this).html());
});
// Draw
var width = '.$width.',
height = '.$height.',
leftgutter = '.$leftgutter.',
bottomgutter = '.$bottomgutter.',
topgutter = '.$topgutter.',
colorhue = .6 || Math.random(),
color = "hsb(" + [colorhue, 1, .75] + ")",
r = Raphael("'.$div.'", width, height),
txt = {font: \'12px Fontin-Sans, Arial\', fill: "'.$fontcolor.'"},
txt1 = {font: \'10px Fontin-Sans, Arial\', fill: "'.$fontcolor.'"},
txt2 = {font: \'12px Fontin-Sans, Arial\', fill: "'.$fontcolor.'"},
X = (width - leftgutter) / labels.length,
max = Math.max.apply(Math, data),
Y = (height - bottomgutter - topgutter) / max;
r.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, 10, 10, "'.$gridcolor.'");
var path = r.path().attr({stroke: "'.$strokecolor.'", "stroke-width": 4, "stroke-linejoin": "round"}),
bgp = r.path().attr({stroke: "'.$strokecolor.'", opacity: .3, fill: "'.$fillcolor.'"}).moveTo(leftgutter + X * .5, height - bottomgutter),
frame = r.path("M25,15 q 0,-5 5,-5 l 90,0 q 5,0 5,5 l 0,30 q 0,5 -5,5 l -90,0 q -5,0 -5,-5 l 0,-5 -14.1,-10 14.1,-10z").attr({fill: "'.$datafillcolor.'", stroke: "'.$datastrokecolor.'", "stroke-width": 2}).hide(),
label = [],
is_label_visible = false,
leave_timer,
blanket = r.set();
label[0] = r.text(60, 10, "24 hits").attr(txt).hide();
label[1] = r.text(60, 40, "22 September 2008").attr(txt1).attr({fill: "'.$fontcolor.'"}).hide();
for (var i = 0, ii = labels.length; i < ii; i++) {
var y = Math.round(height - bottomgutter - Y * data[i]),
x = Math.round(leftgutter + X * (i + .5)),
t = r.text(x, height - 6, labels[i]).attr(txt).toBack();
bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
var dot = r.circle(x, y, 5).attr({fill: "'.$dotfillcolor.'", stroke: "'.$dotstrokecolor.'", "stroke-width": 2});
blanket.push(r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "'.$fontcolor.'", opacity: 0}));
var rect = blanket[blanket.length - 1];
(function (x, y, data, lbl, dot) {
var timer, i = 0;
$(rect.node).hover(function () {
clearTimeout(leave_timer);
var newcoord = {x: +x + 7.5, y: y - 19};
if (newcoord.x + 100 > width) {
newcoord.x -= 114;
}
frame.show().animate({x: newcoord.x, y: newcoord.y}, 200 * is_label_visible);
label[0].attr({text: data + " hit" + ((data % 10 == 1) ? "" : "s")}).show().animateWith(frame, {x: +newcoord.x + 50, y: +newcoord.y + 12}, 200 * is_label_visible);
label[1].attr({text: lbl + " '.$month_year.'"}).show().animateWith(frame, {x: +newcoord.x + 50, y: +newcoord.y + 27}, 200 * is_label_visible);
dot.attr("r", 7);
is_label_visible = true;
}, function () {
dot.attr("r", 5);
leave_timer = setTimeout(function () {
frame.hide();
label[0].hide();
label[1].hide();
is_label_visible = false;
// r.safari();
}, 1);
});
})(x, y, data[i], labels[i], dot);
}
bgp.lineTo(x, height - bottomgutter).andClose();
frame.toFront();
label[0].toFront();
label[1].toFront();
blanket.toFront();
};