文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在gRaphael linechart hoverColumn函数中检索当前X值？

问如何在gRaphael linechart hoverColumn函数中检索当前X值？
EN

Stack Overflow用户

提问于 2012-12-05 11:25:11

回答 1查看 494关注 0票数 0

下面，我发布了一些代码和注释，用于制作带有标记hovereffects的简单gRaphael行(包含的脚本文件可以在http://raphaeljs.com和http://g.raphaeljs.com上找到)。代码的工作原理(因此也可以作为从gRaphael linecharts开始的其他代码的一个很好的例子)，但是对于标记函数的文本参数，我有一个问题/请求：

实际上，标记将显示当前列中每个点(this.valuesi)的Y值，但我希望同时显示X值和Y值(X、Y)。我相信这很简单，但到目前为止，我还没有想出该怎么做。添加逗号和空格是没有问题的，这只是', ' + this.values[i]，但我不知道如何处理X值。this.attr("x")是我到目前为止最接近的，但这是纸上的X坐标，而不是图表X轴上的X值;-)

有人能帮帮我吗？

// 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>

linechart

vml

graphael

javascript

回答 1

Stack Overflow用户

发布于 2014-08-22 06:28:51

尝试在chrome (CTRL+SHIFT+I->Console)中列出对象。例如，在分段图例中，获取每个标签的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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13722197

复制

相似问题

问如何在gRaphael linechart hoverColumn函数中检索当前X值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在gRaphael linechart hoverColumn函数中检索当前X值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在gRaphael linechart hoverColumn函数中检索当前X值？
EN