带SVG统计图的报表实现(附svg部分页面源代码)

本文介绍了如何使用润乾集算报表生成SVG格式的统计图,包括连接数据源、新建报表、设置数据集、编辑报表模板、生成SVG统计图的步骤,并展示了在PC端和移动设备上的预览效果。附带了SVG统计图部分的PC端页面源代码。
摘要由CSDN通过智能技术生成

        SVG作为一种矢量图形,具有任意缩放而不失真、可以被高质量打印、文件较小、交互性强等特性,成为当前一种主流的图片格式。润乾集算报表可以生成SVG格式的统计图,在HTML5中可以直接嵌入SVG统计图,方便用户在PC或移动端查看。

制作报表

        1 连接数据源

        打开集算报表设计器,菜单栏选择工具-数据源,在弹出的数据源编辑窗口中新建数据源或连接现有数据源,这里使用默认的demo数据源。

        2 新建报表

        菜单栏选择文件-新建报表,点击“生成空白报表”,新建一个空白报表。

         3设置数据集

        菜单栏选择报表-数据集,数据集类型选择“SQL检索”,在弹出的SQL编辑器窗口中,选择“语法”页,输入查询SQL语句,也可以通过其他标签页通过可视化界面进行字段选择、检索条件设置等。

        4 编辑报表模板和表达式

        在新建的报表模板中设置报表样式以及表达式:

        根据学生成绩表,按照姓名和科目分组,统计各个班级每个科目的平局成绩。预览结果(部分):

        5 生成SVG统计图

        在上述模板中追加行,并设置合并格,右键A4格,选择“统计图”,统计图类型选择柱形图,分别设置分类轴和系列,如下图:

        切换到“图形特性”选项卡,在图形格式中选择“SVG”格式,如下图:

        设置完成后,报表模板及其表达式如下:


        展现报表

        在报表设计器中,选择工具栏中的“预览报表” ,即可在设计器中查看报表展现结果。

        此外,集算报表设计器内置了Tomcat,允许用户将报表发布到web端查看页面效果,点击工具栏右上角的IE图标 ,设置报表主目录(可采用默认),完成报表发布。

IE10中预览效果

        另外,报表也可以在移动端浏览:

【附】PC端页面源代码(SVG统计图部分)


<td colSpan=4 class="report1_6"><svg viewBox="0,0,748,277" width="748" height="277" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering: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-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><defs id="defs1"
    ><linearGradient x1="690" gradientUnits="userSpaceOnUse" x2="694" y1="117" y2="117" id="linearGradient1" spreadMethod="reflect"
      ><stop style="stop-opacity:1; stop-color:rgb(185,112,52);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(252,218,190);" offset="100%"
      /></linearGradient
      ><linearGradient x1="690" gradientUnits="userSpaceOnUse" x2="694" y1="133" y2="133" id="linearGradient2" spreadMethod="reflect"
      ><stop style="stop-opacity:1; stop-color:rgb(56,129,148);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(192,226,235);" offset="100%"
      /></linearGradient
      ><linearGradient x1="690" gradientUnits="userSpaceOnUse" x2="694" y1="149" y2="149" id="linearGradient3" spreadMethod="reflect"
      ><stop style="stop-opacity:1; stop-color:rgb(96,75,121);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(211,201,223);" offset="100%"
      /></linearGradient
      ><linearGradient x1="60" gradientUnits="userSpaceOnUse" x2="676" y1="121" y2="121" id="linearGradient4" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:white;" offset="0%"
        /><stop style="stop-opacity:1; stop-color:white;" offset="100%"
      /></linearGradient
      ><linearGradient x1="666" gradientUnits="userSpaceOnUse" x2="666" y1="228" y2="257" id="linearGradient5" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(96,96,96);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(44,44,44);" offset="100%"
      /></linearGradient
      ><linearGradient x1="676" gradientUnits="userSpaceOnUse" x2="41" y1="237" y2="237" id="linearGradient6" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(211,211,211);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(108,108,108);" offset="100%"
      /></linearGradient
      ><linearGradient x1="349" gradientUnits="userSpaceOnUse" x2="349" y1="247" y2="257" id="linearGradient7" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(185,185,185);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(83,83,83);" offset="100%"
      /></linearGradient
      ><linearGradient x1="50" gradientUnits="userSpaceOnUse" x2="50" y1="15" y2="247" id="linearGradient8" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(211,211,211);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(108,108,108);" offset="100%"
      /></linearGradient
      ><linearGradient x1="60" gradientUnits="userSpaceOnUse" x2="31" y1="24" y2="24" id="linearGradient9" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(96,96,96);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(44,44,44);" offset="100%"
      /></linearGradient
      ><linearGradient x1="41" gradientUnits="userSpaceOnUse" x2="31" y1="140" y2="140" id="linearGradient10" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(185,185,185);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(83,83,83);" offset="100%"
      /></linearGradient
      ><linearGradient x1="132" gradientUnits="userSpaceOnUse" x2="132" y1="173" y2="247" id="linearGradient11" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(185,112,52);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(86,52,24);" offset="100%"
      /></linearGradient
      ><linearGradient x1="142" gradientUnits="userSpaceOnUse" x2="84" y1="182" y2="182" id="linearGradient12" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(252,218,190);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(209,127,59);" offset="100%"
      /></linearGradient
      ><linearGradient x1="103" gradientUnits="userSpaceOnUse" x2="103" y1="192" y2="247" id="linearGradient13" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(251,197,153);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(160,97,45);" offset="100%"
      /></linearGradient
      ><linearGradient x1="132" gradientUnits="userSpaceOnUse" x2="132" y1="113" y2="192" id="linearGradient14" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(56,129,148);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(26,60,69);" offset="100%"
      /></linearGradient
      ><linearGradient x1="142" gradientUnits="userSpaceOnUse" x2="84" y1="122" y2="122" id="linearGradient15" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(192,226,235);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(63,146,168);" offset="100%"
      /></linearGradient
      ><linearGradient x1="103" gradientUnits="userSpaceOnUse" x2="103" y1="132" y2="192" id="linearGradient16" spreadMethod="pad"
      ><stop style="stop-opacity:1; stop-color:rgb(156,209,224);" offset="0%"
        /><stop style="stop-opacity:1; stop-color:rgb(48,111,128);" offset="100%"
      /></linearGradient
      ><linearGradient x1="132" gradientUnits="userSpaceOnUse" x2="132" y1="64" y2="132" id="linearGradient17" spreadMethod="pad"
      ><stop style="stop-o
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值