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