【官方发布】基于d3.js的酷炫新饼图

我是社区第44834位番薯,欢迎点我头像关注我哦~
本帖最后由 macross 于 2015-9-24 15:41 编辑

fr图表全新优化! 引擎,视觉全面升级!


从fr创立初始,我们就意识到可视化对于报表展现的重要性。因此耗费无数心力,在当时几乎是破釜沉舟先瞻性的采用canvas,开发出了自己的一套图表库。然而,用户审美是随着时代变化的,图表的美化和交互的改善也是一个长久且持续的过程。在积累了大量用户需求和改善建议后,我们决定在今年大幅度优化目前的图表类型,展示效果以及动态交互。
目前暂定的计划是,新图表的各种类型将以插件形式逐渐发布在fr中,这样用户可以尽快的使用到最新的图表且不影响报表开发进度。同时,我们可以在开发过程中不断接受用户反馈,所以,各位如果有图表展现需求,就请狂轰滥炸我们产品组吧(可在此贴留言或者邮件wangjun@fanruan.com)。


今天发布的饼图,就是fr开发的第一款新图表,下面简单介绍下酷炫的新饼图特性~

欢迎参加——FineReport新图表有奖反馈(第1期:酷炫新饼图)
奖励:总共发放100份问卷,参加即奖励60F豆,最后从中抽取2名幸运番薯,获得50F币或者零食大礼包一份。
时间:2015-09-24 00:00~2015-09-30 23:59


********************************************************************************************************
1.玫瑰图特性
新饼图共有三种形态可选择:普通饼图,等弧度玫瑰图,和不等弧度玫瑰图。
特性.png


三种实际效果如下:
1.png 2.png 3.png

充满层次的玫瑰图用在报表展示中,是不是更吸引眼球呢?

2. 自由的角度定义
在系列界面,饼图新增了初始角度和结束角度的定义。于是放开你的想象力吧,你可以制作这样的饼图
270.png (270~90)
或者是这样的
300.png (300~300)

甚至是这样的
180.png (270~180  内径50%)




3.内径设置
上面那张图就用到了饼图的新特性——内径。
利用好内径,不仅可以提升图表的视觉效果,还可以使得图表的信息更具有层次性。 如:

neijing1.png
利用饼图的内径,还可以制作出信息百分比图
neijing2.png


4.自由的模块定义
也许你会好奇上面那张图饼图中间的文字是什么,其实这是饼图的标题。
新饼图把对于标题和图例区域的大小和位置定义完全交给了用户,用户可以设定标题和图例悬浮于图表之上。
如:

tuli.png



5.全新的动画效果
新饼图的各类动画效果经过了我们的深思熟虑,一遍遍调整参数甚至推翻原稿正是为了达到动画的最初意义——美观和谐且具有意义。

初始动画.gif
工具栏和排序2.gif
tili.gif


6.工具栏交互
用户可自定义工具栏交互及功能,目前工具栏可提供的特色交互有“排序”(包括顺序及逆序排序)“导出图片”和“全屏”

工具栏和排序1.gif
quanp.gif





7.数据点提示以及标签内容的自定义
更自由的内容定义,将会是新图表的基础原则。 数据点提示和标签提供内容和样式的完全自定义,用户甚至可以将其设置为html内容。

tupian.png (数据点提示内容嵌入图片)



8.多饼图共享图例
新饼图支持分类设置,而且多分类的饼图共享图例,如图:

多分类共享图例.gif

9.移动端h5预览
新版的一个亮点也在于对移动端web浏览的特殊优化,无论是性能和效果,都有大幅度的提升。




介绍了这么多,更多的细节和效果,就留给用户自己去尝试吧

安装官网最新的设计器,即内置了此功能。

新增.png

最后再打一句广告,帆软图表交流可加此群:136195993   有关于图表的需求,大家可以在里面交流

下期我们将会发布柱形图(新特性)~  视觉简稿如下:
柱形图.gif









参与人数 +1 F豆 +100 理由
传说哥 + 100 赞一个!

查看全部评分

发表于 2015-9-24 12:20:46
发表于 2015-9-24 13:29:59
占板凳
发表于 2015-9-24 14:20:23
楼上2位好无耻哦!
发表于 2015-9-24 14:32:42
{:7_177:}支持
发表于 2015-9-24 14:35:20
棒~~~~~~~~
发表于 2015-9-24 14:43:28
{:5_146:}

支持支持 虽然来晚了一些!
发表于 2015-9-24 14:45:11
发表于 2015-9-24 14:56:05
                                 
发表于 2015-9-24 15:15:36
支持 支持~
发表于 2015-9-26 12:29:57
个人觉得华而不实   不否提高了对电脑的消耗
发表于 2015-9-28 10:44:04
好好学习,天天向上
发表于 2015-9-29 14:50:48
发表于 2015-9-30 09:21:36
卧槽,真炫酷
发表于 2015-9-30 09:51:22
够酷,在满足客户的需求方面,精益求精!!!!
发表于 2015-9-30 09:51:45
够酷,在满足客户的需求方面,精益求精!!!!
发表于 2015-10-8 20:35:36
不错。继续加油。
发表于 2015-10-10 16:15:06
谢谢分享,学习了。。。
发表于 2015-10-11 11:04:21
{:5_133:}{:5_133:}
发表于 2015-10-12 09:04:31
来迟到的,很不错
d3的效果还是不错的
发表于 2015-10-15 15:58:42
这个的确比之前的要好,最关心的还是兼容性和性能如何~~~
发表于 2015-10-20 15:08:14
好高端,早就想要了,哈哈
发表于 2015-11-10 09:25:00
太酷了!什么时候可以分享下!我也来感受一下!新手飘过!
发表于 2015-11-27 12:14:49
Good Job!
发表于 2015-11-27 17:12:05
不错
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

31回帖数 1关注人数 27309浏览人数
最后回复于:2018-2-8 09:57

返回顶部 返回列表