记录Raphael的一点点事

Raphael－一个很是陌生的东东，之前也没见过。在项目中突然遇到这样，感觉有点无从下手，找了一些资料，感觉得到的太小，国内现在这方面的资料太少，也就看到过一个把官方文档翻译过来的网站，用处也不大。

Raphaël 是跨浏览器的JS矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+，兼容性非常好，而且也十分漂亮，强大到可以绘制各种图表，字母，动画，甚至图像(官网上就有一个绘制虎头的demo)。

现在就记录点使用中遇到的问题，也简单说说使用方法：

首先：下载raphael.js库，官网上右上角直接下载就OK了

然后：引入一些需要用到的JS.比如raphael.js/g.raphael.js/g.raphael-min.js这样的。根据想画的报表来确定

再然后就可以开始各种使用了。

//在10, 50的地方， 创建320 × 200的画布

var paper = Raphael(10, 50, 320, 200);

// 在x = 50, y = 40,的地方画半径为10的圆
var circle = paper.circle(50, 40, 10);
//给绘制的圆圈填充红色 red (#f00)
circle.attr("fill", "#f00");

// 设置画笔（stroke）的颜色为白色
circle.attr("stroke", "#fff");

当然这只是官方给的基本用法，在项目中使用的肯定不止这些了，先给出一个效果图



 

window.onload = function () {
var percent1 = ${empty percent1 }?0:("${percent1 }".slice(0, -1))*1;
var percent2 = ${empty percent2 }?0:("${percent2 }".slice(0, -1))*1;
var percent3 = ${empty percent3 }?0:("${percent3 }".slice(0, -1))*1;
var percent4 = ${empty percent4 }?0:("${percent4 }".slice(0, -1))*1;
var percent5 = ${empty percent5 }?0:("${percent5 }".slice(0, -1))*1;
var percent6 = ${empty percent6 }?0:("${percent6 }".slice(0, -1))*1;
var percent101 = ${empty percent101 }?0:("${percent101 }".slice(0, -1))*1;
var percent102 = ${empty percent102 }?0:("${percent102 }".slice(0, -1))*1;
/*以上全是一些数据，大概就是如果没有百分比就赋值为0,否则截取其中子串再转化为数字*/
var data = [percent6,percent5,percent1,percent2,percent3,percent101,percent4,percent102];//设置要用的数据
var flag = true;
var legend = new Array("%%.%% - "+$.i18n.prop('transaction.type.6'), "%%.%% - "+$.i18n.prop('transaction.type.5'),"%%.%% - "+$.i18n.prop('transaction.type.1'),"%%.%% - "+$.i18n.prop('transaction.type.2'),"%%.%% - "+$.i18n.prop('transaction.type.3'),"%%.%% - "+$.i18n.prop('transaction.type.101'),"%%.%% - "+$.i18n.prop('transaction.type.4'),"%%.%% - "+$.i18n.prop('transaction.type.102'));
//利用jquery做的国际化，实际就是百分比的文字说明，一定要和data一一对应，否则出错
var r = Raphael("holder");//实例化，在id="holder"的DIV上渲染图表
//320：左边距离，越大越靠右
//120:上边距，越大越靠下
//100:图表缩放大小，值越大，图表越大
//[55, 20, 13, 32, 5, 1, 2, 10]：是数据
var displayData = new Array();
var displayLegend = new Array();
for(var i=0;i<data.length;i++){
if(data[i]==100){
pie = r.piechart(150, 120, 100, [data[i]], { legend: [legend[i]], legendpos: "east", href: ["#"], colors:[ "#feb847" ]});
flag = false;
break;
} else if(data[i]!=0){
displayData.push(data[i]);
displayLegend.push(legend[i]);
}
}
if(flag){
pie = r.piechart(150, 120, 100, displayData, { legend: displayLegend, legendpos: "east", href: ["#", "#", "#", "#", "#", "#"]});
}
//注解1
//引号内可以加文字，报表标题
r.text(320, 100, "").attr({ font: "20px sans-serif" });
//以下给图表加点监听
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");

if (this.label) {
this.label[0].animate({ r: 5 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
}
});
};

其实用起来挺简单的，三步就行了，一是实例化raphael，并指定渲染到哪；二是给一些数据显示；三是加一些效果看起来更炫。

注解1：这个才是本文想记录的重点，raphael数据的加载可能是比较死板，data,legend必须一一对应，否则会出错，另一个。比如现在显示的是面百分比，所以必须加起来是100%，否则不会显示。在使用过程中有一个之前一直找不到原因的地方，现在我设置的是一个８个元素的数组，但，这８个元素不一定全有直，按之前的想法是，如果有哪个元素为空(处理后为0),应该会把这个去掉。只要保证其他的相加是100%就行了，但实际不是这样的。

现在出现的问题是，如果只有一个数据是100%，其他的为0，但显示出来的效果总不是完整的一个图，IE下会出现一条线，但又不点数据，百分比的文字显示为  -others。

找了很久才发现问题一，也就是现在的注解1上的代码，因为raphael只会处理data里面的数据，不管有没有值，都会显示，如果为０则显示others.所以，必须去掉所有为0的值，重新给data赋值。