如何檢索gRaphael linechart hoverColumn函數中的當前X值？

下面我發佈了一些代碼和評論，用於製作帶標籤主角的簡單gRaphael線條圖（包含的腳本文件位於http://raphaeljs.com和http://g.raphaeljs.com）。代碼正常工作（因此可以成爲其他人開始使用gRaphael線圖的一個很好的例子），但是我有關於標記函數的文本參數的問題/請求：如何檢索gRaphael linechart hoverColumn函數中的當前X值？

就這樣，標記將顯示當前列的每個點的Y值（this.values [i]），但我希望顯示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>

來源

2012-12-05 Morten

想要在折線圖上顯示點的座標嗎？如果是，我可以發佈解決方案。 –

@Neha Choudhary是的，我想要在拖曳折線圖時在標記中顯示當前點（列）的X和Y座標。上面的代碼只顯示Y座標（this.values [i]）。謝謝 – Morten

你試過類似'linechart.symbols.cx'和'linechart.symbols.cy'嗎？ –

嘗試在Chrome中列出的對象（CTRL + SHIFT + I - >控制檯）。例如 - 在piechart傳說中爲每個標籤獲取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; 
}

來源

2014-08-22 06:28:51 Dzarek

如何檢索gRaphael linechart hoverColumn函數中的當前X值？

回答

相關問題