javaScript vector chart library-gRaphael uses a few lines of code to achieve beautiful bar charts/pie charts/point charts/curve charts_javascript skills

gRaphael is a Javascript library dedicated to helping developers draw various beautiful charts in web pages, based on the powerful Raphael vector graphics library. You only need to write a few simple lines of code to create beautiful bar charts, pie charts, dot plots, and curve charts.

gRaphael uses SVG W3C recommended standards and VML as the basis for creating graphics. It is a cross-browser vector graphics library. Currently 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 files into the page, and introduce g.line.js (curve chart), g.bar.js (bar chart) as needed ), g.dot.js (dot chart) and g.pie.js (pie chart) files, and then use the provided methods to create the beautiful charts you want. Here are two simple examples.

Create a static pie chart

Only two lines of code are needed, sample code:

Copy the code The code is as follows:

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

Effect demonstration and complete source code download:

Source code download

Create interactive pie chart
Combining hover and click events and animation methods, you can create beautiful interactive pie charts. Sample code:

Copy code The code is as follows:

// At coordinates (10,50) Create a 640 × 480 canvas
var r = Raphael(10, 50, 640, 480);
// Create a pie chart with center coordinates (320, 240), radius 100, and data [55, 20, 13, 32, 5, 1, 2, 10] pie chart
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(320, 100, "Interactive Pie Chart").attr ({
font: "20px sans-serif"
});
// Add 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 animation effect
if(this.label) {
this.label[0].animate({
r: 5
}, 500 , "bounce");
this.label[1].attr({
"font-weight": 400
});
}
});

Effect demonstration and complete source code download:

Source code 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 documentation: http://julying.com/lab/raphael-js/docs/

Raphael Tutorial for beginners: An Introduction to the Raphael JS Library