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

最新推荐文章于 2024-05-23 10:00:51 发布

刨坑数据

最新推荐文章于 2024-05-23 10:00:51 发布

阅读量3.1k

点赞数

分类专栏：集算报表胡说八道文章标签：报表统计图 svg统计图移动客户端显示集算报表 svg源代码

本文链接：https://blog.csdn.net/u012388497/article/details/45913105

版权

本文介绍了如何使用润乾集算报表生成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