如果想要将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

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

  1. 使用web API和NPOI导出Excel

    使用MVC controller输出excel的例子,自不待言,例子满天飞. 由于本项目使用的是Asp.net MVC API,因此在本项目使用API,实现了文件下载功能.代码的原理很简单,基本上是老 ...

  2. Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题

    细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!   在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...

  3. .Net core Web API导出数据到Excel

    前言 产品经理有一个需求,就是将cosmosDB里的数据,导出到Excel中. 1.新建一个.net core web api controller 添加引用:EPPlus.Core Install- ...

  4. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  5. 细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!

    在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找到都是这个版本! [HttpPost] public Task<Hashtable> ImgUpl ...

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

    1. 创建1个Azure账号,登录之后创建1个AzureStorage.左下方点Manage Access会看到Primary Access Key和Storage Account,记住它们的位置,等 ...

  7. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  8. 同时上传参数及图片到 Web Api

    方法一:利用 FormData JS: function uploadFileAndParam() { var url = "http://localhost:42561/api/uploa ...

  9. Web API接口之FileReader

    Web API接口之FileReader *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

随机推荐

  1. Qt 设置应用程序图标

    Qt4设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc; ...

  2. asp.net mvc跨域filter

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. Mybatis入门例子

    Mybatis是轻量级的持久化框架,的确上手非常快. Mybatis大体上的思路就是由一个总的config文件配置全局的信息,比如mysql连接信息等.然后再mapper中指定查询的sql,以及参数和 ...

  4. Lua: 好的, 坏的, 和坑爹的

                                   好的       小巧: 20000行C代码 可以编译进182K的可执行文件 (Linux下).       可移植: 只要是有ANSI ...

  5. Atitit 异常的实现原理 与用户业务异常

    Atitit 异常的实现原理 与用户业务异常 1.1. 异常的实现原理1 1.2. 用户业务异常1 1.3. 异常转译和异常链2 1.4. 避免异常2 1.5. 异常恢复3 1.6. catch代码块 ...

  6. Atitti.数字证书体系cer pfx attilax总结

    Atitti.数字证书体系cer pfx attilax总结 一.数字证书常见标准 1 数字证书文件格式(cer和pfx)的区别: 1 二.数字证书存储内容 2 X.509是一种非常通用的证书格式. ...

  7. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  8. Liferay7 BPM门户开发之42: Liferay核心JSP定制扩展

    Liferay最大的好处是不仅接口强大,利于扩展,就连JSP定制扩展都提供了3种方式. 修改核心jsp代码,有3种修改方式:1.暴力修改直接修改(位于portal-web/docroot/html), ...

  9. CCNA学习 NAT网络地址转换

    CCNA基础 NAT网络地址转换 在计算机网络中,网络地址转换(Network Address Translation,缩写为NAT),也叫做网络掩蔽或者IP掩蔽(IP masquerading),是 ...

  10. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...