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%,否则不会显示。在使用过程中有一个之前一直找不到原因的地方,现在我设置的是一个8个元素的数组,但,这8个元素不一定全有直,按之前的想法是,如果有哪个元素为空(处理后为0),应该会把这个去掉。只要保证其他的相加是100%就行了,但实际不是这样的。
现在出现的问题是,如果只有一个数据是100%,其他的为0,但显示出来的效果总不是完整的一个图,IE下会出现一条线,但又不点数据,百分比的文字显示为 -others。
找了很久才发现问题一,也就是现在的注解1上的代码,因为raphael只会处理data里面的数据,不管有没有值,都会显示,如果为0则显示others.所以,必须去掉所有为0的值,重新给data赋值。