1. 概述
1.1 应用场景
人口金字塔就是按照人口年龄和性别表示人口分布的塔状条形图,形象地展示了人口的年龄和性别构成。
横轴表示人口数量、纵轴表示年龄段,性别通过不同颜色区分。效果如下图所示:
1.2 实现思路
要实现这种双向条形图,有两个要点:
1)需要使用辅助数据。例如原本为正数的人口,辅助数据要将其中某一性别的人口数变为负数,才能实现方向相反的效果。
2)因为辅助数据中有负数,那么图表坐标轴 X轴 也会存在负数,此时需要通过图表属性面板「样式>坐标轴>X轴>格式」自定义轴标签格式,使负数显示为正数。
1.3 应用实例
复用组件下载后可直接在设计器内安装复用,即可图表自定义轴标签格式效果,无需进行代码编辑;
更多图表自定义轴标签格式组件的示例,可参见 帆软市场-组件 / 设计器→在线组件库,组件复用相关文档请参见:组件复用 。
组件下载链接 | 描述 | 效果图 |
---|---|---|
双向条形图-深色 | 1)该组件适用于深色简约风格模板 2)左右两边采用不同颜色的条形简单直观的对比出两个系列的值 | |
双向条形图-浅色 | 1)该组件适用于浅色简约风格模板 2)左右两边采用不同颜色的条形简单直观的对比出两个系列的值 |
2. 示例
2.1 准备数据
点击下载示例数据:人口结构数据.xlsx
新建普通报表,新建 文件数据集 ,将下载的 Excel 数据上传到模板中。
本文示例已将模板输出为内置数据集「人口结构数据」,可以看到辅助列中男性的人口数据为负数,女性的人口数据为正数。如下图所示:
2.2 插入图表
合并一片区域单元格,点击工具栏「插入图表」按钮,选择条形图。如下图所示:
2.3 设计图表
2.3.1 绑定数据
选中图表,绑定图表数据,如下图所示:
2.3.2 设置样式
1)点击图表属性面板「样式>标题」,输入文本「人口金字塔」。如下图所示:
2)点击属性面板「样式>系列」,将「系列间隔」设置为 -100% ,使系列之间没有间隔不会产生错位。如下图所示:
3)点击属性面板「样式>坐标轴」,自定义 X轴 轴标签格式,将小于 0 的数乘以 -1 变为正数展示出来。
代码如下:
function() {
if (this > 0) return this ;
else return this * (-1) ;
}
如下图所示:
4)由于图表数据使用的辅助列,那么图表的标签或提示中男性的人口数据也显示为负数。这时我们可以设置标签或提示为 富文本 ,在富文本编辑器中使用「数据集字段」中均为正数的「人口」字段。如下图所示:
2.4 效果预览
2.4.1 PC 端
保存模板,点击「分页预览」,效果如下图所示:
2.4.2 移动端
同时支持 App 和 H5 端预览,效果如下图所示:
3. 模板下载
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\BarChart\人口金字塔.cpt
点击下载模板:人口金字塔.cpt