graphael圖表中的軸名稱

Question

我在stackoverflow上發現了很多類似的問題，但是沒有一個可以從我那裏使用。我不能在x軸下寫一個我正在使用的格拉菲爾線條圖的軸標籤。

你知道如何顯示軸標籤嗎？

我的代碼如下所示：

 window.onload = function() { 
      var r = Raphael("holder"), 
       txtattr = { font: "12px sans-serif" }; 

      var x = [], y = [], y2 = [], y3 = []; 

      for (var i = 0; i < 1e6; i++) { 
       x[i] = i * 10; 
       y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3; 
       y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5; 
       y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4; 
      } 

      r.text(160, 10, "Simple Line Chart (1000 points)").attr(txtattr); 
      r.text(480, 10, "shade = true (10,000 points)").attr(txtattr);; 
      r.text(160, 250, "shade = true & nostroke = true (1,000,000 points)").attr(txtattr); 
      r.text(480, 250, "Symbols, axis and hover effect").attr(txtattr); 

      r.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function() { 
       this.set = r.set(
        r.circle(this.x, this.y[0]), 
        r.circle(this.x, this.y[1]), 
        r.circle(this.x, this.y[2]) 
       ); 
      }, function() { 
       this.set.remove(); 
      }); 

      r.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], { shade: true }); 
      r.linechart(10, 250, 300, 220, x, [y, y2, y3], { nostroke: true, shade: true }); 

      var lines = r.linechart(330, 250, 300, 220, [[1, 2, 3, 4, 5, 6, 7], [3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function() { 
       this.tags = r.set(); 

       for (var i = 0, ii = this.y.length; i < ii; i++) { 
        this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); 
       } 
      }, function() { 
       this.tags && this.tags.remove(); 
      }); 

Answer 1

顯示的代碼是從實施例中的一個。每個r.linechart創建一個新圖表。要添加軸，你需要的選項來指定它，你的情況：

r.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function() { 
       this.set = r.set(
        r.circle(this.x, this.y[0]), 
        r.circle(this.x, this.y[1]), 
        r.circle(this.x, this.y[2]) 
       ); 
      }, function() { 
       this.set.remove(); 
      }); 

需要有

r.linechart(10, 10, //top left 
      300, 220, //bottom right 
      x, //x values 
      [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)], //y values (note added ',') 
      { axis: "0 0 1 1" //here you can additional things, e.g. symbol, colors,... 
      } 
      ).hoverColumn(function() { 
       this.set = r.set(
        r.circle(this.x, this.y[0]), 
        r.circle(this.x, this.y[1]), 
        r.circle(this.x, this.y[2]) 
       ); 
      }, function() { 
       this.set.remove(); 
      }); 

這個例子中需要

  r.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], { shade: true, axis :"1 1 0 0" }); 

等。 '軸：「0 0 1 1」'繪製左側和底部的軸，而
'軸：「1 1 0 0」'繪製頂部和右側。