【技术方案】柱形图形变解决方案

专注于数据大屏制作 say Hi
|互助团队番薯老易
引言
柱形图用于显示一段时间内的数据变化或显示各项之间的比较情况柱形图也就是条形统计图,类似的图形表达为直方图,与此相似的还有扇形统计图和折线统计图。文章主讲柱形图。

一、需求简介
在项目需求调研中我们发现大部分的柱形图的表现方式比较单一,方方正正好像并不能很好的表现出数据的增长情况,可视化冲击度不够明显。当然这其中有些值得借鉴如图片方式填充的案例:
截图201712110810352030.png
                            图一                                                     
截图201712110811047950.png
                           图二
图一分析可以看到图片素材要求严格,交互放大后效果会出现图片平铺效果不友好。图二的问题在于看起来主次不是很分明。那么有没有一种介于二者之间的处理方案呢?答案是可以,只要你能擅用finereport实现要的图表或数据并不难。我们这次来制作的就是一个主次明确、增长趋势明显的柱形图提供给大家在后续项目中进行参考。制作完成的效果图如下:
36362.gif

                          图三
通过模板学习你还可以做出排名的高低理论与本例相通。

二、项目分析
首先我们要对制作的图表做出详细分析才能通过软件制作出来。

1)图表分析
我们来分析一下这个图可以看到它是一个类似箭头的方式填充的,如果我们直接把这个图片填充进去是不是就可以了呢?答案是不可以,问题在于一旦我们确定了这个图片的尺寸后数据超过定义好的图片尺寸后会出现平铺效果,如果低于数据择无法显示全图片。那么我们再来看看图片有哪些共同点,首先颜色是一致的,没有渐变底纹,其次注意箭头的高度是一致的,通过这两点我们来拆分一下柱形图,将数据分成上部分(三角形)和下部分(长方形),上方以图片方式填充,下部分以颜色填充。
2)素材准备
图片准备:因为三角形系统中是不支持直接颜色填入的所以我们要制作好6张比例相同的图片。
1.png 2.png 3.png 4.png 5.png 6.png
  
数据准备:任何图表没有数据是不可能完成的所以我们要准备好需要的数据。
截图201712110813217247.png              截图201712110813327285.png
                          图四                                                                  图五
这里真实数据是图四中的国家和数量,想必有人会问那辅助是用来干嘛的,辅助是用来做三角填充标记要用到的区间。所以我将其定义为统一的数值,图五则是加工后的数据。数量+辅助=真实值这样才能保证三角的顶点指向真实Y轴数据,如果不处理直接堆积会比真实数据要大。

三、开发实施
我们首先看来这是一个堆积柱形图,如果直接使用会有什么问题呢?答案在标签上,我们看到图三中的标签是真实数据,那么堆积柱形图使用的是图五的数据,这样标签的数据是不正确的即使正确我们还面临一个标签位置的问题。所以我们不妨采用堆积柱形图-折线图,堆积图用来展示图像,折线图用来标记数据。
清晰以上逻辑后就是基础的制作了柱形图选择图五的数据源,折线图选择图四的数据源如下:
截图201712110813527555.png             截图201712110813599662.png
                图六                                                                     图七
接下来就是如何将图片和系列名对应填充,这时候就要用到条件显示。首先我们来完成中国的填充,添加条件属性填充辅助部分的三角形如图:
截图201712110814206632.png    
                         图八                                                               
截图201712110814358168.png
                        图九
其他系列填充与其相似更改名称即可这里不再赘述。
不知道大家发现没有图三的分类名是竖排显示的并不是我们通常所采用的展示方式,这里用到自定义标签显示内容配置如下:
截图201712110814512901.png
                              图十
代码:
  1. function(){ var str = this.category; var html = str.split('').join('</div><div>'); html = '<div>'+ html+'</div>'; return html;   }
复制代码
剩余部分的调整分为取消交互属性,折线图的标签选择值,折线图的提示颜色配置等到这里我们就完成了要制作的图表。

总结
通过本例的介绍相信大家对图中的实现方式已经有了很清晰的认识,接下来大家可以根据自己的项目需求来更改图形制作出自己想要的效果,如本例可拓展成排名图,我们在每个系列上面加一个排名徽标将能让数据更加明显。数据分析,图表展现是一个漫长的学习过程,不过在这个过程中我们将会不断成长助力企业和自身发展,未来属于努力的番薯加油!

附件:
UpgradeDemo.rar (312.01 KB, 下载次数: 12, 售价: 300 个F豆)
参与人数 +1 F币 +27 理由
兔子酱 + 27 感谢参与精华帖奖励计划~~

查看全部评分

发表于 2017-12-19 11:47:13
根据帆软论坛运营委员最终评分,本篇帖子综合得分27分,具体参见:帆软论坛精华帖奖励计划
恭喜@yiminglian,同时也希望更多的番薯积极参与精华帖奖励计划!
发表于 2017-12-11 09:23:00
很巧妙的解决方法,不过期待官方出来更好的直接适配方案
发表于 2017-12-11 09:58:10
发表于 2017-12-11 10:03:01
get,提名。
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html
发表于 2017-12-11 10:11:31
这个页面的音频吓死我了....不知道怎么回事,自己音箱开的声音贼大...
发表于 2017-12-11 10:25:57
flyingsnake 发表于 2017-12-11 10:11
这个页面的音频吓死我了....不知道怎么回事,自己音箱开的声音贼大...


是不是吓坏了
发表于 2017-12-11 10:26:31
发表于 2017-12-11 10:26:54
cherishdqy 发表于 2017-12-11 10:03
get,提名。
已提名精华帖,待论坛运营委员会评分后可评为精华帖。帆软论坛精华帖奖励计划http://bbs.fanr ...

发表于 2017-12-11 10:27:17
呆呆 发表于 2017-12-11 09:23
很巧妙的解决方法,不过期待官方出来更好的直接适配方案

发表于 2017-12-11 12:19:14
flyingsnake 发表于 2017-12-11 10:11
这个页面的音频吓死我了....不知道怎么回事,自己音箱开的声音贼大...

有音乐?我怎么不知道
发表于 2017-12-11 12:39:01
星痕 发表于 2017-12-11 12:19
有音乐?我怎么不知道

因为你没有音响或者没有电脑打开
发表于 2017-12-21 08:55:47
发表于 2017-12-21 16:31:31
很有想象力! 赞一个  
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16回帖数 1关注人数 11732浏览人数
最后回复于:2017-12-21 16:31

返回顶部 返回列表