Web API:将FlexChart导出为图片

如果想要将FlexChart在应用之外使用,比如使用在报表中,Web API帮助你将FlexChart导出成任何你需要的图片格式。

下面是实现的步骤:

1:创建FlexChart

2:调用Service

3:运行项目

第一步:

需要一个FlexChart,本文的注意力放在Web API部分。因此从一个基本的FlexChart应用开始:

第二步:调用Service

1.添加C1 Web API客户端的JavaScript文件和引用到MVC工程。

2.创建一个功能,使用客户端JavaScript帮助,继承export功能,在Views|FlexChart|Index.cshtml里添加如下代码:

<script type="text/javascript">
    function exportImage() {
        var exporter = new wijmo.chart.ImageExporter();
        imageType = document.getElementById("mySelect").value;
        control = wijmo.Control.getControl(‘#flexChart‘);
        exporter.requestExport(control, "http://demos.componentone.com/ASPNET/C1WebAPIService/api/export/image", {
            fileName: "exportFlexChart",
            type: imageType,
        });
    }
</script>

3.添加按钮然后在Button的Click中调用export的功能,在Views|FlexChart|Index.cshtml里添加如下代码

<select id="mySelect">
    <option selected>Png</option>
    <option>Jpg</option>
    <option>Gif</option>
    <option>Bmp</option>
    <option>Tiff</option>
</select>
<button onclick="exportImage()" title="Export">Export</button>

第三步:运行项目

*点击Build|Build Solution编译项目

*选择F5运行

当运行程序,得到的效果如下所示:

更多的Web API请参考:

http://helpcentral.componentone.com/nethelp/C1WebAPI/webframe.html#C1WebAPI.html

时间: 2024-10-11 22:36:36

Web API:将FlexChart导出为图片的相关文章

Windows Azure 系列-- 使用Azure + Web API实现图片上传

1. 创建1个Azure账号,登录之后创建1个AzureStorage,左下方点Manage Access会看到Primary Access Key和Storage Account,记住它们的位置,等下需要配置到Web.config中. 2. 创建Web.Api project,上传图片的代码: [HttpPost] public async Task<HttpResponseMessage> PostFile() { HttpRequestMessage request = Request;

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

2种方式解决nginx负载下的Web API站点里swagger无法使用

Web API接口站点,引入了swagger来实时生成在线的api文档,也便于api接口的在线测试.swagger:The World's Most Popular Framework for APIs. 本地测试没有问题. 发布到生产,问题出现了.——线上部署的站点是用nginx做的3个节点的负载.nginx配置了公开的域名,并且与3个节点iis上的站点做了映射.3个单节点的端口不是默认的80,由此问题产生了:当访问swagger时,swagger自动获取的文档的url包含了这个端口,因为站点

Web API应用架构设计分析(1)

Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端(包括浏览器,手机和平板电脑等移动设备)的框架, ASP.NET Web API 是一种用于在 .NET Framework 上构建 RESTful 应用程序的理想平台.本文主要以ASP.NET Web API 的框架实现来介绍整个Web API应用架构设计,但不局限于.NET的技术. 1.Web API的核心层设计 在目前发达的应用场景下,我们往往需要接入Winform客户端.APP程序.网站程序.以及目前热火朝天的

ASP.NET MVC Web API 学习笔记---Web API概述及程序示例

1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScript来创建更丰富的HTML体验.所以我相信Web API会越来越有它的用武之地. 说道Web API很多人都会想到Web服务,但是他们仍然有一定的区别:Web API服务是通过一般的 HTTP公开了,而不是通过更正式的服务合同 (如SOAP) 2. ASP.NET W

ASP.NET MVC Web API 学习笔记---第一个Web API程序

http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html 1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScript来创建更丰富的HTML体验.所以我相信Web API会越来越有它的用武之地. 说道Web API很多人都会想到Web服务,但是他们仍然有

如何用web api在网页中嵌入二维码?

如何用web api在网页中嵌入二维码? 随着智能手机和平板电脑的日益普及,二维码逐渐成了链接智能终端和传统网站的桥梁.在下文中,笔者将介绍几个实时生成二维码的web api,希望能够简化web design过程中的二维码集成工作. 1. 范例一 <img src="http://qrickit.com/api/qr?d=http://www.taobao.com" > 上述代码产生如下的二维码图片: 该web api还支持下面的这些特性, 说明文字:例如addtext=H

MVC4 WebAPI(二)——Web API工作方式

在上篇文章中和大家一起学习了建立基本的WebAPI应用,立刻就有人想到了一些问题:1.客户端和WebService之间文件传输2.客户端或者服务端的安全控制要解决这些问题,要了解一下WebAPI的基本工作方式. (一)WebAPI中工作的Class 在MVC中大家都知道,获取Request和Response使用HttpRequest和HttpResponse两个类,在WebAPI中使用两外两个类:HttpRequestMessage 和HttpResponseMessage,分别用于封装Requ

Web APi之认证

Web APi之认证(Authentication)两种实现方式后续[三](十五) 前言 之前一直在找工作中,过程也是令人着实的心塞,最后还是稳定了下来,博客也停止更新快一个月了,学如逆水行舟,不进则退,之前学的东西没怎么用,也忘记了一点,不过至少由于是切身研究,本质以及原理上的脉络还是知其所以然,所以也无关紧要,停止学习以及分享是一件很痛苦的事情,心情很忐忑也很担忧,那么多牛逼的人都在无时无刻的学习更何况是略懂皮毛的我呢?好了,废话说了不少,我们接下来进入主题. 话题 看到博客也有对于我最近有