How to Draw SVG charts in the report

As an SVG vector graphics, arbitrary scaling distortion, can be high-quality printing, file small, interactive and other advantages, is becoming a mainstream picture format. Run Dry aspect may generate a report chart SVG format, it can also be directly embedded in SVG chart in HTML5 allow users to check the PC side or the mobile terminal.

The following example illustrates a process by reporting Run Dry SVG chart.

Reporting

1, connected to the data source

Open Dry Run Report Designer menu bar, choose Tools - data sources, data source in the pop-up edit window or create a new data source to connect existing data sources, where the default demo data source.

The following example illustrates a process by reporting Run Dry SVG chart.

Reporting

1, connected to the data source

4, edit report templates, and expressions

In the new report template settings report style and expression:

According to student achievement table by name and subject grouping, each class for each subject statistical tie score. Preview the result (part):

These are normal reporting procedures.

5, generates SVG charts

Additional lines in the above template and set the merged cells, right-A4 format, select the "Chart", choose the type of chart bar chart, are set category axis and series, as shown below:

Switch to "drawing properties' tab, select 'the SVG' format graphics format, as shown below:

After the setup is complete, report templates and their expression is as follows:

Reports show

In the Report Designer, select the "Report Preview" toolbar

You can view the report in the designer to show results.

Designer preview

In addition, the dry-run Report Designer built-in Tomcat, allows users to publish reports to the web page to see the end results, click on the IE icon in the upper right corner of the toolbar , set the report's home directory (by default can be used), to complete the report is published.

the chrome preview

In addition, reports can also browse the mobile terminal

http://192.168.2.107:6868/demo/reportJsp/matchReport.jsp?rpx=test.rpx&match=1

Phone to see the effect

[PC] attached to the end of the page automatically generated source code (the source SVG part of the chart)

<tdcolSpan=4class="report1_6"><svgviewBox="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--><defsid="genericDefs"

></defsid="genericDefs"><g

><defsid="defs1"

><linearGradientx1="690"gradientUnits="userSpaceOnUse"x2="694"y1="117"y2="117"id="linearGradient1"spreadMethod="reflect"

><stopstyle="stop-opacity:1; stop-color:rgb(185,112,52);"offset="0%"

></stopstyle="stop-opacity:1;><stopstyle="stop-opacity:1; stop-color:rgb(252,218,190);"offset="100%"

></stopstyle="stop-opacity:1;></linearGradient>

</defs><gstyle="fill:white; stroke:white;"

><rectx="0"width="748"height="275"y="0"style="stroke:none;"

></rectx="0"width="748"height="275"y="0"style="stroke:none;"></g

><gstyle="stroke-linejoin:round; stroke-linecap:round; stroke-miterlimit:0.1;"

><rectx="686"width="44"height="48"y="113"style="fill:none;"

></rectx="686"width="44"height="48"y="113"style="fill:none;"><rectx="690"y="117"width="8"style="fill:url(#linearGradient1); stroke:none;"height="8"

></rectx="690"y="117"width="8"style="fill:url(#linearGradient1);></g>

<polygonstyle="fill:url(#linearGradient71); stroke:none;"points=" 615 87 615 130 634 111 634 68"

></polygonstyle="fill:url(#linearGradient71);><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 615 87 615 130 634 111 634 68"

></polygonstyle="fill:none;><polygonstyle="fill:url(#linearGradient72); stroke:none;"points=" 576 87 615 87 634 68 595 68"

></polygonstyle="fill:url(#linearGradient72);><polygonstyle="fill:none; stroke:rgb(1,1,1);"points=" 576 87 615 87 634 68 595 68"

></polygonstyle="fill:none;><rectx="576"y="87"width="39"style="fill:url(#linearGradient73); stroke:none;"height="43"

></rectx="576"y="87"width="39"style="fill:url(#linearGradient73);><rectx="576"y="87"width="39"style="fill:none; stroke:rgb(1,1,1);"height="43"

></rectx="576"y="87"width="39"style="fill:none;></g></g></svg>

</td>

从源码中可以看到润乾报表对 HTML5 的有效支持，客户在开发相关应用时可以直接使用润乾报表生成 SVG 统计图。