欢迎来到天天文库
浏览记录
ID:34405990
大小:847.57 KB
页数:8页
时间:2019-03-05
《润乾集算报表生成svg统计图的示例》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、润乾集算报表生成SVG统计图的示例SVG作为一种矢量图形,具有任意缩放而不失真、可以被高质量打印、文件较小、交互性强等特性,成为当前一种主流的图片格式。润乾集算报表中已经封装了SVG生成类库,可以生成SVG格式的统计图,方便用户在PC或移动端查看报表统计图。这里通过一个示例说明集算报表生成SVG统计图的过程。连接数据源打开集算报表设计器,菜单栏选择工具-数据源,在弹出的数据源编辑窗口中新建数据源或连接现有数据源,这里使用默认的demo数据源。新建报表菜单栏选择文件-新建报表,点击“生成空白报表”
2、,新建一个空白报表。设置数据集菜单栏选择报表-数据集,数据集类型选择“SQL检索”,在弹出的SQL编辑器窗口中,选择“语法”页,输入查询SQL语句,也可以通过其他标签页通过可视化界面进行字段选择、检索条件设置等。编辑报表模板和表达式在新建的报表模板中设置报表样式以及表达式:根据学生成绩表,按照班级和科目分组,统计各个班级每个科目的平局成绩。预览结果:生成SVG统计图在上述模板中追加行,并设置合并格,右键A5格,选择“统计图”,统计图类型选择柱形图,分别设置分类轴和系列,如下图:切换到“图形特性”
3、选项卡,在图形格式中选择“SVG”格式,如下图:设置完成后,报表模板及其表达式如下:设置A3、A4、A5的左主格为A2,跟随A2扩展,并设置第一行和第二行隐藏,即可显示每个班级的各个科目平均成绩SVG格式统计图。展现报表在报表设计器中,选择工具栏中的“预览报表”,即可在设计器中查看报表展现结果。设计器预览效果此外,集算报表设计器内置了Tomcat,允许用户将报表发布到web端查看页面效果,点击工具栏右上角的IE图标,设置报表主目录(可采用默认),完成报表发布。IE10中预览效果另外,报表也可以在
4、移动端浏览:手机上查看效果【附】PC端页面源代码(SVG统计图部分)5、auto;stroke-linecap:square;stroke-miterlimit:10;stroke-opacity:1;shape-rendering:auto;fill:black;stroke-dasharray:none;font-weight:normal;stroke-width:1;font-family:'Dialog';font-style:normal;stroke-linejoin:miter;font-size:12;stroke-dashof6、fset:0;image-rendering:auto;"xmlns="http://www.w3.org/2000/svg">7、="fill:none;"x1="73"x2="585"y1="15"/>8、="181"style="fill:none;stroke:gray;"y2="181"/>
5、auto;stroke-linecap:square;stroke-miterlimit:10;stroke-opacity:1;shape-rendering:auto;fill:black;stroke-dasharray:none;font-weight:normal;stroke-width:1;font-family:'Dialog';font-style:normal;stroke-linejoin:miter;font-size:12;stroke-dashof
6、fset:0;image-rendering:auto;"xmlns="http://www.w3.org/2000/svg">7、="fill:none;"x1="73"x2="585"y1="15"/>8、="181"style="fill:none;stroke:gray;"y2="181"/>
7、="fill:none;"x1="73"x2="585"y1="15"/>8、="181"style="fill:none;stroke:gray;"y2="181"/>
8、="181"style="fill:none;stroke:gray;"y2="181"/>
此文档下载收益归作者所有