html5动态图表工具FineReport:[15]甘特图
1、 数据准备
新建工作薄,添加内置数据集如下:
在单元格中统计出每个步骤的计划开始与结束时间、实际开始与结束时间及完成百分比,作为图表数据来源,如下图:
注:每个步骤的时间必须是纵向排列,活动必须为横向排列,即上面的表格必须保持一样的展现方式。
数据列设置如下:
单元格数据集数据列属性
C1 ds1 步骤 从左到右扩展,其余默认
C2 ds1 计划开始时间 从左到右扩展,其余默认
C3 ds1 计划结束时间 从左到右扩展,其余默认
C4 ds1 实际开始时间 从左到右扩展,其余默认
C5 ds1 实际结束时间 从左到右扩展,其余默认
C6 ds1 完成百分比 从左到右扩展,其余默认
![html5动态图表工具FineReport:[15]甘特图](https://exp-picture.cdn.bcebos.com/ba97ffd06de89a616fcb412745e8b004551bad46.jpg)
![html5动态图表工具FineReport:[15]甘特图](https://exp-picture.cdn.bcebos.com/87645f93cee8b004b9f5d1bb79260d9a300ea946.jpg)
2、插入图表
以悬浮图表为例,点击插入>悬浮元素>插入图表,选择甘特图,点击确定。
3、设置图表数据
![html5动态图表工具FineReport:[15]甘特图](https://exp-picture.cdn.bcebos.com/cfa9ae04541bd10f1dc80d2eba0e1799e82aa746.jpg)
4、 保存并预览
保存模板,点击分页预览,便即可看到如上的效果。模板效果在线查看请点击GanttChart.cpt
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\GanttChart.cpt。
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
阅读量:182
阅读量:148
阅读量:93
阅读量:183
阅读量:120