今天看到
Raphaël的介绍,于是下载下来看了一下。做了个简单的饼图,效果还不错。不过只能在IE里完全显示,别的浏览器显示不出饼图。这个JS库的文档太简略了。

下面是部分代码:
var colors = ["#FFCCFF", "#9999FF", "#CCFFCC", "#FF8080",
"#660066", "#CCFFFF", "#FFFFCC", "#000080",
"#CCCCFF", "#FF00FF", "#0066CC", "#993366"];
var data = [{name: "Java", rate: 0.19401},
{name: "C", rate: 0.15837},
{name: "C++", rate: 0.09633},
{name: "VB", rate: 0.08843},
{name: "PHP", rate: 0.08779},
{name: "C#", rate: 0.05062},
{name: "Python", rate: 0.04567},
{name: "Perl", rate: 0.04117},
{name: "Delphi", rate: 0.03624},
{name: "JavaScript", rate: 0.03540},
{name: "Ruby", rate: 0.03278},
{name: "Other", rate: 0.133190}];
var rateList = new Array();
for (var i = 0; i < data.length; i++)
rateList.push(data[i].rate);
var chart = Raphael(20, 20, 501, 401);
var border = chart.rect(0, 0, 500, 400);
border.attr("stroke", "#000000");
border.attr("stroke-width", 2);
var title = chart.text(185, 40, "2009年2月编程语言市场份额统计表");
title.attr("font-family", "Arial");
title.attr("font-size", "18px");
var charList = drawPieChart(50, 90, 310, 310, rateList);
var legend = Raphael(390, 150, 101, 251);
var logendBorder = legend.rect(0, 0, 100, 250);
logendBorder.attr("stroke", "#000000");
for (var i = 0; i < data.length; i++)
{
var shape = legend.rect(10, i * 20 + 5, 16, 16);
shape.attr("fill", colors[i]);
shape.attr("stroke", "#000000");
var label = legend.text(60, i * 20 + 15, data[i].name);
label.attr("font-family", "Arial");
label.attr("font-size", "12px");
}
function drawPieChart(x, y, w, h, array)
{
var shapes = new Array();
var chart = Raphael(x, y, w, h);
var radius = Math.max(Math.min(w / 2, h / 2) - 4, 0);
var radian = 0;
var lastX = w / 2 + radius;
var lastY = h / 2;
var currentX = 0;
var currentY = 0;
for (var i = 0; i < array.length; i++)
{
radian = radian + array[i];
currentX = w / 2 + Math.cos(Math.PI * radian * 2) * radius;
currentY = h / 2 + Math.sin(Math.PI * radian * 2) * radius;
shapes.push(chart.path({stroke: "#000000", fill: colors[i]}).
moveTo(lastX, lastY).
arcTo(radius, radius, false, true, currentX, currentY).
lineTo(w / 2, h / 2).
andClose());
lastX = currentX;
lastY = currentY;
}
return shapes;
}
function rotate()
{
if (charList)
for (var i = 0; i < charList.length; i++)
charList[i].rotate(15);
}