JavaScript vector chart library-several lines of gRaphael code for exquisite bar chart/pie chart/DOT chart/Graph

GRaphaelIs designed to help developers draw a variety of exquisite charts on the web page.JavascriptLibrary, based on powerfulRaphaelVector Graphics Library. You only need to write several lines of simple code to create exquisite bar charts, pie charts, point charts, and graphs.

GRaphaelUse the SVG W3C recommendation standard andVMLAs the basis for creating images, it is a cross-browser vector graphics library. Currently, the supported browsers include Firefox 3.0 +, Safari 3.0 +, Chrome 5.0 +, Opera 9.5 +, and Internet Explorer 6.0 +.

Usage: Introduce raphael. js, g. raphael. js file, and introduce g. line. js (graph), g. bar. js (bar chart), g. dot. js (DOT chart) and g. pie. js (pie chart) file, and then create the desired exquisite Chart Based on the provided method. The following are two simple examples.

Create a static pie chart

You only need two lines of code. The sample code is as follows:

Copy codeThe Code is as follows: // create a 600x450 canvas in coordinates ()
Var r = Raphael (10, 50,600,450 );
// Create a pie chart with the center coordinates (320,200). The radius is 150 and the data is [55, 20, 13, 32, 5, 1, 2, 10 ].
R. piecharts (320,240,150, [55, 20, 13, 32, 5, 1, 2, 10]);

Effect demo and complete source code download:

Source code download

Create an interactive pie chart
Combined with hover, click events, and animation methods, you can create exquisite interactive pie charts. Sample Code:

Copy codeThe Code is as follows: // create a 640x480 canvas in coordinates ()
Var r = Raphael (10, 50,640,480 );
// Create a pie chart with the center coordinates (320,240). The radius is 100 and the data is [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 the text in the coordinate (320,100)
R. text (320,100, "Interactive Pie Chart"). attr ({
Font: "20px sans-serif"
});
// Add a hover event to the 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
}, 500, "bounce ");
// Add an animation effect
If (this. label ){
This. label [0]. animate ({
R: 5
}, 500, "bounce ");
This. label [1]. attr ({
"Font-weight": 400
});
}
});

Effect demo and complete source code download:

Source code download

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

GRaphael English Reference documents: http://g.raphaeljs.com/reference.html

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

Raphael English References: http://raphaeljs.com/reference.html

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

Beginner Raphael Tutorial: An Introduction to the Raphael JS Library