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

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴(lài)的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶(hù)選擇Fusioncharts來(lái)制作專(zhuān)業(yè)的JavaScript圖表。

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

點(diǎn)擊下載FusionCharts Suite XT最新試用版

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

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

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

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

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

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

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

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

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

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

啟用了導(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();

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

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

2、將圖表配置存儲(chǔ)在JSON對(duì)象中。在此JSON對(duì)象中：

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

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

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

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

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

3、為圖表添加一個(gè)容器（實(shí)例）。

出口模式

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

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

• 客戶(hù)端導(dǎo)出

• 自動(dòng)導(dǎo)出

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

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

從v3.12.1版本開(kāi)始，該exportMode屬性替換該exportAtClientSide屬性。

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

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

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

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

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

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

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

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

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

想要了解或購(gòu)買(mǎi)FusionCharts Suite XT正版授權(quán)的朋友歡迎咨詢(xún)

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