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”微信公众号，及时获取产品最新消息和最新资讯