翻譯|使用教程|編輯:吳園園|2019-10-14 12:04:25.007|閱讀 344 次
概述:本篇教程將為您介紹如何導出圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案,目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。
FusionCharts Suite XT現已更新至3.14.0-sr.1版本,FusionCharts Angular包裝器現在與Angular 8兼容并修復了一些bug。
點擊下載FusionCharts Suite XT最新試用版
FusionCharts Suite XT使用JavaScript通過SVG和VML在瀏覽器中呈現圖表。該套件的一個突出特點是能夠導出JPG,PNG,SVG,PDF格式的渲染圖表并導出圖表數據。
在本節中,我們將討論如何:
將圖表導出為圖像和PDF
以XLSX格式導出圖表數據
將圖表導出為圖像和PDF
服務器端幫助程序庫通過將SVG轉換為所需格式來啟用導出。您還可以在導出之前將VML在內部轉換為SVG時進行導出。導出過程中,將要導出的數據首先發送到FusionCharts服務器進行處理,最后生成所需格式的輸出。
在客戶端上導出圖表時,整個導出過程是使用用戶的瀏覽器執行的。圖表的SVG轉換為選定的導出格式,并使用HTML5 download屬性下載。
您必須具有有效的Internet連接才能使用此功能。
要啟用圖表導出,將chartlevel屬性exportEnabled設置為1。在(菜單)按鈕,然后在圖表的右上角可見。單擊/將鼠標懸停在此按鈕上可以查看帶有導出選項的下拉菜單,如下圖所示:
從呈現的菜單中,選擇所需的格式。該圖表將以選定的格式下載到您的計算機上。
啟用了導出的2D柱形圖如下所示。單擊(菜單)按鈕,然后選擇所需的導出格式。
上面示例的完整代碼如下:
// Include the core fusioncharts file from core -import FusionCharts from "fusioncharts/core";// Include the chart from viz folder// E.g. - import ChartType from fusioncharts/viz/[ChartType]import Column2D from "fusioncharts/viz/column2d";// Include the fusion themeimport FusionTheme from "fusioncharts/themes/es/fusioncharts.theme.fusion";// Add the chart and theme as dependency// E.g. FusionCharts.addDep(ChartType)FusionCharts.addDep(Column2D);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({ type: "Column2D", width: "700", // Width of the chart height: "400", // Height of the chart dataFormat: "json", // Data type renderAt: "chart-container", //container where the chart will render dataSource: { // Chart Configuration chart: { caption: "Countries With Most Oil Reserves [2017-18]", subCaption: "In MMbbl = One Million barrels", xAxisName: "Country", yAxisName: "Reserves (MMbbl)", numberSuffix: "K", exportEnabled: "1", theme: "fusion" }, // Chart Data data: [ { label: "Venezuela", value: "290" }, { label: "Saudi", value: "260" }, { label: "Canada", value: "180" }, { label: "Iran", value: "140" }, { label: "Russia", value: "115" }, { label: "UAE", value: "100" }, { label: "US", value: "30" }, { label: "China", value: "30" } ] }});// RenderchartInstance.render();
上圖通過以下步驟呈現:
1、包括必要的庫文件,例如fusioncharts庫,融合主題文件等。
2、將圖表配置存儲在JSON對象中。在此JSON對象中:
將圖表類型設置為column2d。
設置寬度和高度(以像素為單位)。
將設置dataFormat為JSON。
將json數據嵌入為的值dataSource。
將exportEnabledattribute 的值設置為1,這將啟用圖表的導出功能。
3、為圖表添加一個容器(實例)。
出口模式
FusionCharts Suite XT支持以下三種導出方式:
服務器端導出
客戶端導出
自動導出
默認情況下,使用自動導出功能導出圖表。
該exportMode屬性用于在不同的導出模式之間切換。
從v3.12.1版本開始,該exportMode屬性替換該exportAtClientSide屬性。
要在您自己的服務器上處理導出數據,請按照“ 安裝專用導出服務器”指南配置導出處理程序之一。
在XLSX格式導出圖表數據
FusionCharts可讓您以JPG,PNG,SVG和PDF格式導出呈現的圖表。從v3.13.5開始,FusionCharts Suite XT引入了以XLSX格式(作為Excel電子表格)導出圖表數據的功能。
要啟用圖表導出,請將圖表級別屬性設置exportEnabled為1。在(菜單)按鈕,然后在圖表的右上角可見。單擊/將鼠標懸停在按鈕上可以看到帶有導出選項的下拉菜單,如下圖所示:
要導出圖表數據,請選擇“ 導出為XLSX”選項。帶有圖表數據的XLSX文件將下載到您的計算機上。
啟用了導出的2D柱形圖如下所示。單擊(菜單)按鈕,然后選擇“ 導出為XLSX”選項以導出圖表數據。
要使用服務器端導出以XLSX格式導出圖表,必須使導出服務器具有FusionCharts軟件包中可用的最新代碼。或者,您也可以使用FusionCharts導出鏈接export.api3.fusioncharts.com。對于客戶端導出,只有具有畫布支持的現代瀏覽器(Safari和IE9除外)才支持導出圖表數據功能。您仍然可以導出圖表,而無需包含可配置的數據。
要在您自己的服務器上處理導出數據,請按照“ 安裝專用導出服務器”指南配置導出處理程序之一。
=====================================================
想要了解或購買FusionCharts Suite XT正版授權的朋友歡迎咨詢
關注“慧聚IT”微信公眾號,及時獲取產品最新消息和最新資訊
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自: