0

以下に、タグ hovereffects を使用して単純な gRaphael 折れ線グラフを作成するためのコードとコメントをいくつか投稿しました (含まれているスクリプト ファイルはhttp://raphaeljs.comおよびhttp://g.raphaeljs.comにあります)。コードは正常に機能します (したがって、gRaphael ラインチャートを使い始める他のユーザーにとっては良い例になる可能性があります) が、タグ関数のテキスト引数に関して質問/要求があります。

そのままでは、タグは現在の列の各ポイント (this.values[i]) の 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>
4

1 に答える 1