Как я могу получить текущее значение X в функции hoverColumn линейной диаграммы gRaphael?

Ниже я разместил некоторый код и комментарии для создания простой линейной диаграммы gRaphael с эффектами наведения тегов (включенные файлы сценариев можно найти по адресу http://raphaeljs.com и http://g.raphaeljs.com). Код работает так, как должен (и, таким образом, может быть хорошим примером для других, начинающих работу с линейными диаграммами gRaphael), но у меня есть вопрос/просьба относительно текстового аргумента функции тега:

Как есть, теги будут отображать значения 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>

javascript linechart vml graphael
person Morten    schedule 05.12.2012    source источник
comment
Вам нужны координаты точек на линейной диаграмме? Если да, то могу опубликовать решение.   -  person Neha Choudhary    schedule 16.04.2013
comment
@Neha Choudhary Да, я хочу, чтобы координаты X и Y текущей точки (столбца) отображались в теге при пролистывании линейной диаграммы. Мой код выше отображает только координату Y (this.values[i]). Спасибо   -  person Morten    schedule 23.04.2013
comment
Вы пробовали что-то вроде linechart.symbols.cx и linechart.symbols.cy?   -  person Neha Choudhary    schedule 23.04.2013
comment
@Neha Choudhary Я пробовал сейчас, но ни один из них не сработал. Тег просто показывает undefined. Это, кстати, уже не так важно для меня, так что не трать много времени на выяснение этого. Спасибо   -  person Morten    schedule 26.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте вывести объект в хром (CTRL+SHIFT+I->Консоль). Например, получите 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;
}
person Dzarek    schedule 22.08.2014