Adding x-axis and y-axis to barchart in gRaphael?
I want to create a barchart using the gRaphael javascript library. Does gRapha开发者_开发技巧el support labeled axes?
You could work with the axis class as well for this :
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"});
[I am aware that this question is old, but here is my solution -]
I did not manage to use the r.g.axis, but I used the 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);
}
I see some axis although without labels in this example. I think you can add text to a desired position using Raphael function text().
var t = paper.text(50, 50, "X Label");
and for the Y-axis, I added another bar, with the steps I want to mark. I guess you can set its color to "transparent".
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);
}
精彩评论