|
文|互助团队番薯老易
引言 柱形图用于显示一段时间内的数据变化或显示各项之间的比较情况柱形图也就是条形统计图，类似的图形表达为直方图，与此相似的还有扇形统计图和折线统计图。文章主讲柱形图。
一、需求简介
在项目需求调研中我们发现大部分的柱形图的表现方式比较单一，方方正正好像并不能很好的表现出数据的增长情况，可视化冲击度不够明显。当然这其中有些值得借鉴如图片方式填充的案例： 图一 图二 图一分析可以看到图片素材要求严格，交互放大后效果会出现图片平铺效果不友好。图二的问题在于看起来主次不是很分明。那么有没有一种介于二者之间的处理方案呢？答案是可以，只要你能擅用finereport实现你要的图表或数据并不难。我们这次来制作的就是一个主次明确、增长趋势明显的柱形图提供给大家在后续项目中进行参考。制作完成的效果图如下：
图三 通过模板学习你还可以做出排名的高低理论与本例相通。
二、项目分析 首先我们要对制作的图表做出详细分析才能通过软件制作出来。
1)图表分析 我们来分析一下这个图可以看到它是一个类似箭头的方式填充的，如果我们直接把这个图片填充进去是不是就可以了呢？答案是不可以，问题在于一旦我们确定了这个图片的尺寸后数据超过定义好的图片尺寸后会出现平铺效果，如果低于数据择无法显示全图片。那么我们再来看看图片有哪些共同点，首先颜色是一致的，没有渐变底纹，其次注意箭头的高度是一致的，通过这两点我们来拆分一下柱形图，将数据分成上部分（三角形）和下部分（长方形），上方以图片方式填充，下部分以颜色填充。 2)素材准备 图片准备：因为三角形系统中是不支持直接颜色填入的所以我们要制作好6张比例相同的图片。 数据准备：任何图表没有数据是不可能完成的所以我们要准备好需要的数据。 图四 图五 这里真实数据是图四中的国家和数量，想必有人会问那辅助是用来干嘛的，辅助是用来做三角填充标记要用到的区间。所以我将其定义为统一的数值，图五则是加工后的数据。数量+辅助=真实值这样才能保证三角的顶点指向真实Y轴数据，如果不处理直接堆积会比真实数据要大。
三、开发实施 我们首先看来这是一个堆积柱形图，如果直接使用会有什么问题呢？答案在标签上，我们看到图三中的标签是真实数据，那么堆积柱形图使用的是图五的数据，这样标签的数据是不正确的即使正确我们还面临一个标签位置的问题。所以我们不妨采用堆积柱形图-折线图，堆积图用来展示图像，折线图用来标记数据。 清晰以上逻辑后就是基础的制作了柱形图选择图五的数据源，折线图选择图四的数据源如下： 图六 图七 接下来就是如何将图片和系列名对应填充，这时候就要用到条件显示。首先我们来完成中国的填充，添加条件属性填充辅助部分的三角形如图： 图八 图九 其他系列填充与其相似更改名称即可这里不再赘述。 不知道大家发现没有图三的分类名是竖排显示的并不是我们通常所采用的展示方式，这里用到自定义标签显示内容配置如下： 图十 代码： - function(){ var str = this.category; var html = str.split('').join('</div><div>'); html = '<div>'+ html+'</div>'; return html; }
剩余部分的调整分为取消交互属性，折线图的标签选择值，折线图的提示颜色配置等到这里我们就完成了要制作的图表。
总结 通过本例的介绍相信大家对图中的实现方式已经有了很清晰的认识，接下来大家可以根据自己的项目需求来更改图形制作出自己想要的效果，如本例可拓展成排名图，我们在每个系列上面加一个排名徽标将能让数据更加明显。数据分析，图表展现是一个漫长的学习过程，不过在这个过程中我们将会不断成长助力企业和自身发展，未来属于努力的番薯加油！
附件：
编辑于 2017-12-11 12:49
| 
来自 12#
