Qr's blog--[原创]SVG饼图示例及经验小结

[原创]SVG饼图示例及经验小结　

2008/9/16 17:12:33

SVG饼图示例及经验小结原创：Qr，2008/9/16 http://Qr.blogger.org.cn 经过短暂的学习，饼图的绘制终于取得了不错的成绩，贴几个示例和一些小经验作为这个阶段的小结。平面饼图一般比较简单，以圆形为主，没什么新鲜的，值得一提的是，饼图绘制的起始问题，似乎从π/2起始效果比0起始更加美观，更加突出视觉效果，这也许正是常见饼图绘制大多从π/2起始的原因吧。实际上，π/2起始比0起始的饼图，在计算方面没有什么大的差别，纯粹在角度上加π/2或90℃即可。至于3D饼图，个人以为0起始比π/2起始更好，原因3D饼图通常以两个椭圆饼图叠加，前者比后者少了一个椭圆叠加的痕迹，要想达到完美，须对这个痕迹进行重绘修饰，以达到掩饰的效果。感兴趣的朋友可以将源码中有4个path的g的第3个path注释掉看看效果，尽管可以通过第3个path来修饰，但须修饰的地方多了，效果多少有点打折，况且还增加了一些难度和页面数据传输量。绘制3D饼图，还有一个突出的问题。SVG不支持CSS中的z-index，所以，各元素的显示就因为层的问题无法控制而导致图形显示错位，因为SVG各元素以添加次序为准，靠后的元素会覆盖靠前的元素。无论0起始或是π/2起始，都存在这个问题，1、4象限扇面叠加显示，如图片末尾两个饼图。解决的办法就是，判断哪个扇面始边处于第1象限、终边处于第4象限，将所处象限的扇面按倒序方式重排输出即可。关于饼图的填充色，相邻的扇面最好用对比色，如果相邻的几个扇面色系相同颜色相近并由浅而深，则那几个扇面间就会形成比较强的立体感，视觉效果会差很多（本例代码中的填充色彩是程序随机生成，没有认真去调整，所以效果有点差）。还有一个问题，就是分组问题，3D饼图每个扇面的所有元素分在一个组内，这样，无论是动画、渲染、色彩及脚本就可以非常方便的去实现了。最后，关于 viewBox 缩放的问题，这个参数设置不好，就会导致比例失衡。如果浏览器分辨率为1027*768，可设viewBox="0 0 1024 600"，这样，在没有缩放的情况下，浏览器显示原图大小，其它分辨率可依此推定。（这个问题适用于所有SVG图形绘制。）本文涉及3D饼图源码，没有进行渲染，如果通过滤镜进行渲染，3D效果更真实，只是本人初学，还没有涉及到滤镜，所以…… 原创：Qr，2008/9/16 http://Qr.blogger.org.cn 源码：500)this.width=500'>Pie.rar 500)this.width=500'>

Posted by Qr on 2008/9/16 17:12:33

回复:[原创]SVG饼图示例及经验小结

2008/9/20 9:16:13

个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除

网络一直不好，也忙，看望朋友有些晚啊。以下为blog主人的回复：

烟雨朦胧

Posted by 烟雨朦胧 on 2008/9/20 9:16:13

回复:[原创]SVG饼图示例及经验小结

2008/9/17 12:34:30

个人主页 | 引用回复 | 主人回复 | 返回 | 编辑 | 删除

以下引用真不准在2008-9-16 21:05:24的评论:SVG竟然是个基于XML的东东，XML真是无孔不入。。不过靠人手写不现实。。。用什么工具弄的？ XML的确无孔不入，也的确是好东西。其实只要理解path中的参数A就可以自己写SVG饼图生成代码了。命令和参数: A (r r 0 0|1 0|1 x y)+参数解释:1) 第1、2参数：圆弧的半径；2) 第3参数：固定为0；3) 第4参数：0表示小于180度的弧，1表示大弧；4) 第5参数：0为表示弧在路径前进方向的右边，1表示在左边；5) 第6、7参数：弧的终点坐标，此点同时作为下一园弧或命令A、L的当前点知道圆的圆心坐标，半径和夹角，用三角函数的知识就可以计算出各点的坐标。网上似乎有这样的工具。

Posted by Qr on 2008/9/17 12:34:30