JavaScript vector chart library-gRaphael several lines of code to achieve exquisite bar chart/pie chart/DOT chart/Curve Graph _ javascript skills

GRaphael is a Javascript library designed to help developers draw various exquisite charts on webpages, you only need to write a few lines of simple code to create exquisite bar charts, pie charts, point charts, and graphs. Interested friends can understand GRaphaelIs designed to help developers draw a variety of exquisite charts on the web page. JavascriptLibrary, based on powerful RaphaelVector 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:

The Code is as follows:

// Create a canvas of 600x450 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:

The Code is as follows:

// Create a canvas of 640x480 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

Official Raphael website address:Http://raphaeljs.com

Raphael English Reference documents:Http://raphaeljs.com/reference.html

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

Raphael Beginner's Tutorial:An Introduction to the Raphael JS Library