JavaScript圖表工具FusionCharts Suite XT入門教程（六）：導出圖表

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”微信公眾號，及時獲取產品最新消息和最新資訊