JavaScript图表工具FusionCharts Suite XT入门教程(六):导出图表

翻译|使用教程|编辑:吴园园|2019-10-14 12:04:25.007|阅读 27 次

概述:本篇教程将为您介绍如何导出图表。

相关链接:

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。在(菜单)按钮,然后在图表的右上角可见。单击/将鼠标悬停在此按钮上可以查看带有导出选项的下拉菜单,如下图所示: 

JavaScript图表工具FusionCharts Suite XT入门教程(六):导出图表

从呈现的菜单中,选择所需的格式。该图表将以选定的格式下载到您的计算机上。

启用了导出的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。在(菜单)按钮,然后在图表的右上角可见。单击/将鼠标悬停在按钮上可以看到带有导出选项的下拉菜单,如下图所示:

JavaScript图表工具FusionCharts Suite XT入门教程(六):导出图表

要导出图表数据,请选择“ 导出为XLSX”选项。带有图表数据的XLSX文件将下载到您的计算机上。

启用了导出的2D柱形图如下所示。单击(菜单)按钮,然后选择“ 导出为XLSX”选项以导出图表数据。

要使用服务器端导出以XLSX格式导出图表,必须使导出服务器具有FusionCharts软件包中可用的最新代码。或者,您也可以使用FusionCharts导出链接export.api3.fusioncharts.com。对于客户端导出,只有具有画布支持的现代浏览器(Safari和IE9除外)才支持导出图表数据功能。您仍然可以导出图表,而无需包含可配置的数据。

要在您自己的服务器上处理导出数据,请按照“ 安装专用导出服务器”指南配置导出处理程序之一。

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

想要了解或购买FusionCharts Suite XT正版授权的朋友欢迎咨询慧都官方在线客服

关注“慧聚IT”微信公众号,及时获取产品最新消息和最新资讯

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/export-charts-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat