[英]How can I retrieve current X-value in gRaphael linechart hoverColumn function?
Below I've posted some code and comments for making a simple gRaphael linechart with tag hovereffects (the included script files can be found at http://raphaeljs.com and http://g.raphaeljs.com ). 在下面,我发布了一些代码和注释,用于制作带有标签hovereffects的简单gRaphael线图(包含的脚本文件可以在http://raphaeljs.com和http://g.raphaeljs.com上找到)。 The code works as it should (and can thus be a good example for others starting out with gRaphael linecharts), but I have a question/request regarding the text argument of the tag function:
该代码可以正常工作(因此对于以gRaphael折线图开始的其他人来说可以成为一个很好的示例),但是我对标记函数的text参数有一个疑问/要求:
As is, the tags will display the Y values for each point (this.values[i]) at the current column, but I would like to have both the X values and the Y values displayed (X, Y). 照原样,标记将在当前列显示每个点的Y值(this.values [i]),但我想同时显示X值和Y值(X,Y)。 I'm sure it's pretty simple, but so far I've not been able to figure out how to do it.
我敢肯定这很简单,但是到目前为止,我还无法弄清楚该怎么做。 Adding the comma and a space is no problem, that's just
', ' + this.values[i]
, but I can't figure out how to address the X values. 加上逗号和空格是没有问题的,那只是
', ' + this.values[i]
,但是我不知道如何解决X值。 this.attr("x")
is the closest I've come so far, but that's the X coordinate on the paper, not the X value on the chart's X axis ;-) this.attr("x")
是我到目前为止最接近的,但这是纸张上的X坐标,而不是图表X轴上的X值;-)
Can anyone help me out please? 有人可以帮我吗?
// make tags at every point on the current column
for (var i = 0; i < this.y.length; i++) {
this.tags.push(
// make tag (x, y, text, degree, radius)
paper.tag(this.x, this.y[i], this.values[i], 0, 4).insertBefore(this).attr([{ fill: "#ffffff" }, { fill: this.symbols[i].attr("fill") }])
);
<html>
<head>
<title></title>
<script src="raphael-min.js"></script>
<script src="g.raphael-min.js"></script>
<script src="g.line-min.js"></script>
<script language="JavaScript">
function graphael() {
var paper = Raphael("paper");
var chartwidth = 800;
var chartheight = 300;
var charttopleftx = 20;
var charttoplefty = 0;
// The chart
var linechart = paper.linechart(charttopleftx, charttoplefty, chartwidth, chartheight,
// The X-coordinate sets
[
[0, 1, 2, 3, 4, 5],
[0, 1, 2, 3, 4, 5],
[0, 1, 2, 3, 4, 5]
],
// The Y-coordinate sets
[
[500, 550, 540, 510, 600, 570],
[500, 525, 400, 450, 390, 490],
[500, 425, 500, 430, 650, 425]
],
// Chart config
{ axis: "0 0 1 1", symbol: "circle", smooth: false, axisxstep: 5 });
// The dots
linechart.symbols.attr({ r: 4 });
// The tags
linechart.hoverColumn(
// show
function onmousein() {
this.tags = paper.set(); // creates a set of tags (to be able to hide them all in one operation)
// make tags at every point on the current column
for (var i = 0; i < this.y.length; i++) {
this.tags.push(
// make tag (x, y, text, degree, radius)
paper.tag(this.x, this.y[i], this.values[i], 0, 4).insertBefore(this).attr([{ fill: "#ffffff" }, { fill: this.symbols[i].attr("fill") }])
);
}
}
,
// hide
function onmouseout() {
this.tags.hide();
}
);
}
</script>
</head>
<body onload="graphael()">
<div id='paper' style='width:900;height:320;'></div>
</body>
</html>
Try to listing object in chrome (CTRL+SHIFT+I->Console). 尝试列出Chrome中的对象(CTRL + SHIFT + I->控制台)。 For example - get cy and y for every label in piechart legend.
例如-为饼图图例中的每个标签获取cy和y。
var pieChart = paper.piechart(w, h, rad, values, {legend: legend, legendpos: "south", minPercent: 0.1, legendothers: "Others"});
for( var i = 0; i < pieChart.labels.length; i++ ) {
var CY=pieChart.labels[i][0][0].cy.animVal.value;
var Y=pieChart.labels[i][1][0].y.animVal[0].value;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.