Hinzufügen von x-Achse und y-Achse zum Balkendiagramm in gRaphael?

Question

Ich möchte ein Balkendiagramm mit der JavaScript-Bibliothek gRaphael erstellen. Unterstützt gRaphael beschriftete Achsen?

Answer 1

Ich sehe einige Achsen, obwohl ohne Etiketten in diesem example. Ich denke, dass Sie Text mit Raphael-Funktion text() zu einer gewünschten Position hinzufügen können.

var t = paper.text(50, 50, "X Label"); 

Answer 2

Sie könnten mit der Achse Klasse arbeiten auch für diese:

  var chart = r.g.barchart(50,15,gW,167, [ this.chart.Value ], { }).hover(fin, fout); 
      var aX = chart.bars[0][0].x; 
      var aW = chart.bars[0][chart.bars[0].length -1].x - aX; 
      var axis = r.g.axis(aX,180,aW ,null,null,this.chart.Labels.length - 1 ,2, this.chart.Labels , "|", 0); 
      axis.text.attr({font:"12px Arial", "font-weight": "regular", "fill": "#FFFFFF"}); 

Answer 3

[Ich bin mir bewusst, dass diese Frage ist alt, aber hier ist meine Lösung -]

ich nicht verwalten die rgaxis zu verwenden, aber ich verwendet, um die aX -

var x, y = 250; 
    for (i = 0; i < MAX_ITEMS; i++) { 
    x = chart.bars[0][i].x; 
    r.text(x, y, "[" + i + "]").attr(txtattr); 
    } 

Answer 4

und für die Y-Achse, fügte ich eine andere Bar, mit den Schritten, die ich möchte markieren . Ich denke, Sie können seine Farbe auf "transparent" einstellen.

var myArrY = new Array();     // original values      
// TODO: fill its values as before . . . 

var myArrY_steps = new Array(0, 10, 20, 30); // the steps I want to mark 

var myData = new Array();      
myData[0] = myArrY; 
myData[1] = myArrY_steps; 
var chart = r.barchart(10, 10, 600, 300, myData, 0, {type: "sharp"}); 
. . . 
var x = 10; 
var y; 
for (i = 0; i < myArrY_steps.length; i++) { 
    // Note: In this loop I use chart.bars[1], the steps array! 
    y = chart.bars[1][i].y;     // calculated by gRaphael ! 
    r.text(x, y, chart.bars[1][i].value).attr(txtAttr); 
}