Anychart不僅可以生成各種類型的flash圖表，而且還允許你將flash圖表保存為PNG圖像。AnyChart允許通過鼠標右擊，選擇"Save as Image"保存圖表為圖象。還可以服務器端自動生成報表。AnyChart是第一個支持此功能的產品！今天，我們就一起來看看AnyChart是如何將flash chart 保存為圖像的。

　　注：你需要放置腳本在你的服務器上，并且還需要配置chart xml來設置你所需要的頁面。

　　一、AnyChart保存為圖像的原理

　　當Anychart完成圖表渲染后，它可以創建一個PNG圖像，并將圖像發送到服務器或者應用程序。PNG圖像以64位編碼方式發送，服務器對其解碼并輸出以響應解碼流。

　　對于用戶而言，通過鼠標右擊，選擇"Save as Image"保存圖表為圖象。AnyChart啟動瀏覽器默認的 "Save As"對話框，用戶就可以選擇圖片所要存儲的地址。

　　設置保存圖像腳本路徑，你需要用到以下XML文件：

　　<?xml version=";1.0" encoding="UTF-8"?>

　　 <anychart>

　　 <settings>
<image_export url="//localhost/saveasimage/AnyChartPNGSaver.php" />

　　 </settings>

　　 </anychart>

　　如果我們創建了PHP, J2EE, ASP (VBScript), VB.Net和C#等腳本，則可以在export_image_scripts文件夾中找到它們。

　　1、文件名

　　你可以利用file_name和use_title_as_file_name屬性，設置保存時的自定義文件名。

　　<?xml version="1.0" encoding="UTF-8"?>

　　 <anychart>

　　 <settings>

　　 <image_export url="//localhost/saveasimage/AnyChartPNGSaver.php" file_name="weekly_report" use_title_as_file_name="true" />

　　 </settings>

　　 </anychart>

　　2、圖像大小

　　你可以設置導出圖像的大小，不是縮放而是實際圖像的大小（就好像你在JS中設置了寬度和高度一樣）。如果你不設置圖像大小屬性，導出的圖像就和原圖像大小一樣。

　　<?xml version="1.0" encoding="UTF-8"?>

　　 <anychart>

　　 <settings>

　　 <image_export url="//localhost/saveasimage/AnyChartPNGSaver.php" width=";1024" height="800" />

　　 </settings>

　　 </anychart>

　　3、獲取圖像：getPNG（）函數

　　anychart的getPNG（）函數可返回帶有png圖像的base64編碼的字符串。你可以通過這些字符串獲取圖像，并把字符串傳到腳本。

　　 <script type="text/javascript" language="javascript">
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();

function getPNGImage()
{
pngImage=chart.getPNG();
}

　　 //]]>
</script>

　　注：getPNG函數有兩個可選參數：寬度和高度。如果你想獲取一個與其他圖像大小不一樣的的圖像，你就可以設置這些參數。

　　4、獲取矢量：getSVG（）函數

　　anychart的getSVG（）函數會返回一個帶有SVG文件的字符串。你可以通過該字符串來獲取一個矢量格式的截圖，并將該截圖傳遞給腳本。

　　<script type="text/javascript" language="javascript">
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;
var chart = new AnyChart();
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();

function getPlainSVG()
{
return chart.getSVG(false);
}

function getSVGAsBase64EncodedString()
{
pngImage=chart.getSVG(true);
}
//]]>
</script>

　　二、自動保存圖表

　　你可以在自動模式下保存圖表。只要圖表一顯示，無需點擊任何圖表或按鈕，圖表便可保存為圖片。要實現該功能，你需要創建一個draw event 的事件處理程序，調用將生成PNG 或者 JPEG 圖像的 SaveAsImage Function。

　　<script type="text/javascript" language="javascript">
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart();
chart.setXMLFile("data.xml");
chart.addEventListener("draw", function() {
saveChartAsImage(chart);
});
chart.write("chart_container");

　　</script>

　　三、保存和解碼服務器腳本

　　1、PHP Save As Script

　　將AnyChartPNGSaver.php文件放在你網站的根文件夾：

　　 <?xml version="1.0" encoding=";UTF-8"?>

　　 <anychart>

　　 <settings>

　　 <image_export url="//localhost/AnyChartPNGSaver.php" />

　　 </settings>

　　 </anychart>

　　2、ASP Save As Script

　　將AnyChartPNGSaver.asp文件放在你網站的根文件夾：

　　 <?xml version="1.0" encoding=&quot;UTF-8"?&gt;

　　 <anychart>

　　 <settings>

　　 <image_export url=&quot;//localhost/AnyChartPNGSaver.asp" />

　　 </settings>

　　 </anychart>

　　3、VB.NET Save As Script

　　將AnyChartPNGSaver.aspx文件放在網站的根文件夾：

　　<?xml version="1.0" encoding="UTF-8"?>

　　<anychart>

　　 <settings>

　　 <image_export url="//localhost/AnyChartPNGSaver.aspx" />

　　 </settings>

　　</anychart>

　　4、C# Save As Script

　　 將AnyChartPNGSaver.aspx文件放在網站的根文件夾：

　　<?xml version="1.0" encoding="UTF-8"?>

　　 <anychart>

　　 <settings>

　　 <image_export url="//localhost/AnyChartPNGSaver.aspx" />

　　 </settings>

　　</anychart>

　　5、JSP Save As Script

　　將AnyChartPNGSaver.jsp文件放在網站的根文件夾：

　　 <?xml version="1.0" encoding="UTF-8"?&gt;

　　 <anychart>

　　 <settings>

　　 &lt;image_export url=&quot;//localhost/AnyChartPNGSaver.jsp" />

　　 </settings>

　　 </anychart>

下載anychart試用版：//ke049m.cn/zh-CN/product/1009/feature.aspx

（慧都控件網版權所有，轉載請注明出處，否則追究法律責任）
標簽：