如何在報表中繪製 SVG 統計圖

SVG 做爲一種矢量圖形，具備任意縮放不失真、可被高質量打印、文件較小、交互性強等優點，正逐漸成爲一種主流的圖片格式。潤乾報表一方面能夠生成 SVG 格式的統計圖，另外一方面也能夠在 HTML5 中直接嵌入 SVG 統計圖，方便用戶在 PC 端或移動端查看。

下面經過一個示例說明潤乾報表生成 SVG 統計圖的過程。

製做報表

一、 鏈接數據源

打開潤乾報表設計器，菜單欄選擇工具 - 數據源，在彈出的數據源編輯窗口中新建數據源或鏈接現有數據源，這裏使用默認的 demo 數據源。

二、 新建報表

菜單欄選擇文件 - 新建報表，點擊「生成空白報表」，新建一個空白報表。

三、設置數據集

菜單欄選擇報表 - 數據集，數據集類型選擇「SQL 檢索」，在彈出的 SQL 編輯器窗口中，選擇「語法」頁，輸入查詢 SQL 語句，也能夠經過其餘標籤頁的可視化界面進行字段選擇、檢索條件設置等。

四、編輯報表模板和表達式

在新建的報表模板中設置報表樣式以及表達式：

根據學生成績表，按照姓名和科目分組，統計各個班級每一個科目的平局成績。預覽結果（部分）：

以上都是常規的報表製做步驟。

五、生成 SVG 統計圖

在上述模板中追加行，並設置合併格，右鍵 A4 格，選擇「統計圖」，統計圖類型選擇柱形圖，分別設置分類軸和系列，以下圖：

切換到「圖形特性」選項卡，在圖形格式中選擇「SVG」格式，以下圖：

設置完成後，報表模板及其表達式以下：

展示報表

在報表設計器中，選擇工具欄中的「預覽報表」

，便可在設計器中查看報表展示結果。

設計器預覽效果

此外，潤乾報表設計器內置了 Tomcat，容許用戶將報表發佈到 web 端查看頁面效果，點擊工具欄右上角的 IE 圖標，設置報表主目錄（可採用默認），完成報表發佈。

chrome 中預覽效果

另外，報表也能夠在移動端瀏覽

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

手機上查看效果

【附】PC 端自動生成的頁面源代碼（SVG 統計圖的部分源碼）

<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"

/><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; stop-color:rgb(252,218,190);"offset="100%"

/></linearGradient>

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

><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="690"y="117"width="8"style="fill:url(#linearGradient1); stroke:none;"height="8"

/></g>

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

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

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

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

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

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

/></g></g></svg>

</td>

從源碼中能夠看到潤乾報表對 HTML5 的有效支持，客戶在開發相關應用時能夠直接使用潤乾報表生成 SVG 統計圖。