JavaScript Vector Chart Gallery-graphael A few lines of code to achieve beautifully bar/pie/dot/graph _javascript Tips

Graphael is a Javascript library dedicated to helping developers draw a variety of fine charts on their web pages, based on a powerful Raphael Vector Graphics library. You only need to write a few lines of simple code to create fine bar, pie, point and graph.

Graphael uses the SVG Consortium recommendation Standard and VML as the basis for creating graphics, and is a cross-browser vector graphics library that currently supports browsers including: Firefox 3.0+,safari 3.0+,chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

how to: introduce raphael.js,g.raphael.js files into a page, and introduce g.line.js (graphs), g.bar.js (bar charts), g.dot.js (dots) and G.pie.js (pie chart) file, and then based on the methods provided you can create a beautiful chart that you want, here are two simple examples.

Create a static pie chart

Just two lines of code, sample code:

Copy Code code as follows:

Create a 600x450 canvas in coordinates (10,50)
var r = Raphael (10, 50, 600, 450);
Create a pie chart with central coordinates (320, 200), a radius of 150, and a pie chart with data [55, 20, 13, 32, 5, 1, 2, 10]
R.piechart (320, 240, 150, [55, 20, 13, 32, 5, 1, 2, 10]);

effect Demo and complete source download：

SOURCE download

Create an interactive pie chart
Combining hover and click events and animation methods, you can create beautifully interactive pie charts, sample code:

Copy Code code as follows:

Create a 640x480 canvas in coordinates (10,50)
var r = Raphael (10, 50, 640, 480);
Create a pie chart with central coordinates (320, 240), a radius of 100, and a pie chart with data [55, 20, 13, 32, 5, 1, 2, 10]
Pie = R.piechart (320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], {
Legend: ["%%.%%-Enterprise users", "IE users"],
Legendpos: "West",
HREF: ["http://raphaeljs.com", "http://g.raphaeljs.com"]
});
Draw text at coordinates (320, 100)
R.text ("Interactive Pie Chart"). attr ({
Font: "20px sans-serif"
});
Add a hover event to a pie chart
Pie.hover (function () {
This.sector.stop ();
This.sector.scale (1.1, 1.1, this.cx, this.cy);

if (This.label) {
This.label[0].stop ();
This.label[0].attr ({
r:7.5
});
This.label[1].attr ({
"Font-weight": 800
});
}
}, function () {
This.sector.animate ({
Transform: ' S1 1 ' + this.cx + ' + this.cy
}, "Bounce");
Add animation effects
if (This.label) {
This.label[0].animate ({
R:5
}, "Bounce");
This.label[1].attr ({
"Font-weight": 400
});
}
});

effect Demo and complete source download：

SOURCE download

Graphael official website address: http://g.raphaeljs.com/

Graphael English Reference Document: http://g.raphaeljs.com/reference.html

Raphael official website address: http://raphaeljs.com

Raphael English Reference Document: http://raphaeljs.com/reference.html

Raphael Chinese help document: http://julying.com/lab/raphael-js/docs/

Raphael Novice Beginner Tutorial: An Introduction to the Raphael JS Library