JavaScript圖表工具FusionCharts Suite XT入門教程（六）：導(dǎo)出圖表

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來制作專業(yè)的JavaScript圖表。

FusionCharts Suite XT現(xiàn)已更新至3.14.0-sr.1版本，F(xiàn)usionCharts Angular包裝器現(xiàn)在與Angular 8兼容并修復(fù)了一些bug。

點擊下載FusionCharts Suite XT最新試用版

FusionCharts Suite XT使用JavaScript通過SVG和VML在瀏覽器中呈現(xiàn)圖表。該套件的一個突出特點是能夠?qū)С鯦PG，PNG，SVG，PDF格式的渲染圖表并導(dǎo)出圖表數(shù)據(jù)。

在本節(jié)中，我們將討論如何：

• 將圖表導(dǎo)出為圖像和PDF

• 以XLSX格式導(dǎo)出圖表數(shù)據(jù)

將圖表導(dǎo)出為圖像和PDF

服務(wù)器端幫助程序庫通過將SVG轉(zhuǎn)換為所需格式來啟用導(dǎo)出。您還可以在導(dǎo)出之前將VML在內(nèi)部轉(zhuǎn)換為SVG時進行導(dǎo)出。導(dǎo)出過程中，將要導(dǎo)出的數(shù)據(jù)首先發(fā)送到FusionCharts服務(wù)器進行處理，最后生成所需格式的輸出。

在客戶端上導(dǎo)出圖表時，整個導(dǎo)出過程是使用用戶的瀏覽器執(zhí)行的。圖表的SVG轉(zhuǎn)換為選定的導(dǎo)出格式，并使用HTML5 download屬性下載。

您必須具有有效的Internet連接才能使用此功能。

要啟用圖表導(dǎo)出，將chartlevel屬性exportEnabled設(shè)置為1。在（菜單）按鈕，然后在圖表的右上角可見。單擊/將鼠標懸停在此按鈕上可以查看帶有導(dǎo)出選項的下拉菜單，如下圖所示： 

從呈現(xiàn)的菜單中，選擇所需的格式。該圖表將以選定的格式下載到您的計算機上。

啟用了導(dǎo)出的2D柱形圖如下所示。單擊（菜單）按鈕，然后選擇所需的導(dǎo)出格式。

上面示例的完整代碼如下：

// 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();

上圖通過以下步驟呈現(xiàn)：

1、包括必要的庫文件，例如fusioncharts庫，融合主題文件等。

2、將圖表配置存儲在JSON對象中。在此JSON對象中：

• 將圖表類型設(shè)置為column2d。

• 設(shè)置寬度和高度（以像素為單位）。

• 將設(shè)置dataFormat為JSON。

• 將json數(shù)據(jù)嵌入為的值dataSource。

• 將exportEnabledattribute 的值設(shè)置為1，這將啟用圖表的導(dǎo)出功能。

3、為圖表添加一個容器（實例）。

出口模式

FusionCharts Suite XT支持以下三種導(dǎo)出方式：

• 服務(wù)器端導(dǎo)出

• 客戶端導(dǎo)出

• 自動導(dǎo)出

默認情況下，使用自動導(dǎo)出功能導(dǎo)出圖表。

該exportMode屬性用于在不同的導(dǎo)出模式之間切換。

從v3.12.1版本開始，該exportMode屬性替換該exportAtClientSide屬性。

要在您自己的服務(wù)器上處理導(dǎo)出數(shù)據(jù)，請按照“ 安裝專用導(dǎo)出服務(wù)器”指南配置導(dǎo)出處理程序之一。

在XLSX格式導(dǎo)出圖表數(shù)據(jù)

FusionCharts可讓您以JPG，PNG，SVG和PDF格式導(dǎo)出呈現(xiàn)的圖表。從v3.13.5開始，F(xiàn)usionCharts Suite XT引入了以XLSX格式（作為Excel電子表格）導(dǎo)出圖表數(shù)據(jù)的功能。

要啟用圖表導(dǎo)出，請將圖表級別屬性設(shè)置exportEnabled為1。在（菜單）按鈕，然后在圖表的右上角可見。單擊/將鼠標懸停在按鈕上可以看到帶有導(dǎo)出選項的下拉菜單，如下圖所示：

要導(dǎo)出圖表數(shù)據(jù)，請選擇“ 導(dǎo)出為XLSX”選項。帶有圖表數(shù)據(jù)的XLSX文件將下載到您的計算機上。

啟用了導(dǎo)出的2D柱形圖如下所示。單擊（菜單）按鈕，然后選擇“ 導(dǎo)出為XLSX”選項以導(dǎo)出圖表數(shù)據(jù)。

要使用服務(wù)器端導(dǎo)出以XLSX格式導(dǎo)出圖表，必須使導(dǎo)出服務(wù)器具有FusionCharts軟件包中可用的最新代碼。或者，您也可以使用FusionCharts導(dǎo)出鏈接export.api3.fusioncharts.com。對于客戶端導(dǎo)出，只有具有畫布支持的現(xiàn)代瀏覽器（Safari和IE9除外）才支持導(dǎo)出圖表數(shù)據(jù)功能。您仍然可以導(dǎo)出圖表，而無需包含可配置的數(shù)據(jù)。

要在您自己的服務(wù)器上處理導(dǎo)出數(shù)據(jù)，請按照“ ;安裝專用導(dǎo)出服務(wù)器”指南配置導(dǎo)出處理程序之一。

=====================================================

想要了解或購買FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢

關(guān)注“慧聚IT”微信公眾號，及時獲取產(chǎn)品最新消息和最新資訊