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

Source: Internet
Author: User
Tags vector graphics library

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 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:
Copy codeThe 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.