在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
1.准备工作：
网上下载highcharts导出的关键dll。
1）、Svg.dll：因为highcharts的格式其实就是一个xml，采用svg的方式画图；
2）、itextsharp.dll：这样主要是用于处理和提取highcharts图表内的文字以及编码问题；
2.创建一个简单asp.net项目，并把上述两个程序集引入到项目中，OK。
3.给出页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HCExport.aspx.cs" Inherits="HighCharts_Web.HCExport" ValidateRequest="false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/highcharts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/highcharts/highcharts.js"></script>
<script type="text/javascript" src="Scripts/highcharts/exporting.js"></script>
<script type="text/javascript">
var chart;
$(function () {
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals:
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
showInLegend: true //是否显示图例
}
},
exporting: {
filename: 'mychart',
url: "/HCExport.aspx"
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
}); });
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div style="text-align:center; width:100%;">
<input type="button" value="保存图表至服务器（默认保存为PNG格式可自行调整)" onclick="SaveChart()" />
</div>
<script type="text/javascript" language="javascript">
//也可以直接用异步提交方式，这样可以防止页面刷新
function ExportChart() {
$.ajax(
{
type: 'POST', //post方式异步提交
async: false, //同步提交
url: "/highcharts_export.aspx", //导出图表的服务页面地址
dataType: "json", //传递方式为json
//几个重要的参数 如果这里不传递width的话，需要修改导出服务页面内的Request.Form["width"].ToString() 把这句代码注释掉即可
data: { type: 'image/png', filename: 'MyChartTest', width: , svg: chart.getSVG() },
success: function (msg) {
alert("图表导出成功!");
},
error: function (errorMsg) {
if (errorMsg.statusText == "OK") {
alert("图表导出成功!");
} else {
alert("图表导出失败!");
}
}
}
);
}
//保存图表
function SaveChart() {
chart.exportChart({
type: 'image/png',
filename: 'mychart'
});
}
</script>
</body> </html>
4.服务器上的代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Text;
using System.Drawing.Imaging;
using iTextSharp.text.pdf;
using iTextSharp.text;
using Svg;
using System.Xml; namespace HighCharts_Web
{
public partial class HCExport : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//判断参数是否正确
//type是可以自己指定的导出类型
//svg是默认传递的
//filename是可以自己指定的文件名
if (Request.Form["type"] != null && Request.Form["svg"] != null && Request.Form["filename"] != null)
{
//获得相应参数
string tType = Request.Form["type"].ToString();
string tSvg = Request.Form["svg"].ToString();
string tFileName = Request.Form["filename"].ToString();
if (tFileName == "")
{
tFileName = "chart";
}
//将svg转换为二进制流 特别注意了：这里将svg转换成二进制流时，一定要选择正确的编码格式，
//否则，导出来的图片中中文有乱码，如下面的编码，肯定会出现乱码，我们应该改成UTF8,才不会出现乱码
MemoryStream tData = new MemoryStream(Encoding.ASCII.GetBytes(tSvg));
MemoryStream tStream = new MemoryStream(); string tTmp = new Random().Next().ToString(); string tExt = "";
string tTypeString = "";
//获取导出类型
switch (tType)
{
case "image/png":
tTypeString = "-m image/png";
tExt = "png";
break;
case "image/jpeg":
tTypeString = "-m image/jpeg";
tExt = "jpg";
break;
case "application/pdf":
tTypeString = "-m application/pdf";
tExt = "pdf";
break;
case "image/svg+xml":
tTypeString = "-m image/svg+xml";
tExt = "svg";
break;
} if (tTypeString != "")
{
string tWidth = Request.Form["width"].ToString();
SvgDocument tSvgObj = SvgDocument.Open<SvgDocument>(tData); switch (tExt)
{
case "jpg":
tSvgObj.Draw().Save(tStream, ImageFormat.Jpeg);
break;
case "png":
tSvgObj.Draw().Save(tStream, ImageFormat.Png);
break;
case "pdf": PdfWriter tWriter = null;
Document tDocumentPdf = null;
try
{
// First step saving png that would be used in pdf
tSvgObj.Draw().Save(tStream, ImageFormat.Png); // Creating pdf document
tDocumentPdf = new Document(new iTextSharp.text.Rectangle((float)tSvgObj.Width, (float)tSvgObj.Height));
// setting up margin to full screen image
tDocumentPdf.SetMargins(0.0f, 0.0f, 0.0f, 0.0f);
// creating image
iTextSharp.text.Image tGraph = iTextSharp.text.Image.GetInstance(tStream.ToArray());
tGraph.ScaleToFit((float)tSvgObj.Width, (float)tSvgObj.Height); tStream = new MemoryStream(); // Insert content
tWriter = PdfWriter.GetInstance(tDocumentPdf, tStream);
tDocumentPdf.Open();
tDocumentPdf.NewPage();
tDocumentPdf.Add(tGraph);
tDocumentPdf.CloseDocument();
}
catch (Exception ex)
{
throw ex; }
finally
{
//正确释放资源
tDocumentPdf.Close();
tDocumentPdf.Dispose();
tWriter.Close();
tWriter.Dispose();
tData.Dispose();
tData.Close(); }
break;
case "svg":
tStream = tData;
break;
}
//保存图表路径 可以自己指定
tFileName = Server.MapPath("~/Report/") + tFileName + "." + tExt;//将二进制流保存为指定路径下的具体文件
System.IO.File.WriteAllBytes(tFileName, tStream.ToArray());
Response.Write("恭喜您，highcharts导出成功，路径为" + tFileName);
}
}
}
}
}
}
5，这样就可以将图表下载到服务器的Report文件夹中了，ok，不谢！
6。着力推荐关于本文中所解决的问题，让更多的爱好者都能学习到如此经典的方式。本文也是借鉴的。
http://www.stepday.com/topic/?594 http://www.stepday.com/topic/?725
7.自己的一点感悟：
其实，针对highcharts中的图表，浏览器中呈现的是图表，我们大多数人误认为这是张图片，现在我想把这种观念纠正，这图表不是一张图片，而是一个svg文件，文件中是种xml文件，从本文中完全可以体会到，本文中我们主要是将svg字符串存储在二进制流中（MemoryStream），然后通过Svgdocument对象Draw后一png格式存储中流中，（tSvgObj.Draw().Save(tStream, ImageFormat.Png);），最后，直接写入对应的文件中。
在asp.net中如何自己编写highcharts图表导出到自己的服务器上来的更多相关文章
- Highcharts图表导出为pdf的JavaWeb实践
写给读者的话^_^: 众所周知,基于Highcharts插件生成的svg图片组(注意这里鄙人指的组是若干图有序组合,并非一张图片,具有业务意义)导出为PDF文档是有难度滴.鄙人也曾“异想天开”用前端技 ...
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- ASP.NET中常用的优化性能的方法
1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...
- 在 ASP.NET 中创建数据访问和业务逻辑层（转）
.NET Framework 4 当在 ASP.NET 中处理数据时,可从使用通用软件模式中受益.其中一种模式是将数据访问代码与控制数据访问或提供其他业务规则的业务逻辑代码分开.在此模式中,这两个层均 ...
- 利用.net的内部机制在asp.net中实现身份验证
知识点: 在ASP.NET中,任何页面都是继承于System.Web.UI.Page,他提供了Response,Request,Session,Application的操作.在使用Visual Stu ...
- 在ASP.NET中如何运行后台任务
from:https://blogs.msdn.microsoft.com/scott_hanselman/2014/12/21/asp-net/ [原文发表地址] How to run Backgr ...
- 如何在ASP.Net中实现RSA加密
在我们实际运用中,加密是保证数据安全的重要手段.以前使用ASP时,对数据加密可以使用MD5和SHA1算法,这两种算法虽然快捷有效,但是无法对通过它们加密的密文进行反运算,即是解密.因此需要解密数据的场 ...
- KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用 最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEdit ...
- ASP.NET中的指令:
来源:http://www.cnblogs.com/zhuisha/archive/2008/07/02/1234222.html ASP.NET中的指令: @Page指令: @Page指令只能在.a ...
随机推荐
- 关于Git中的一些常用的命令
深入了解git的checkout命令 检出命令(git checkout)是Git最常用的命令之一,同时也是一个很危险的命令. 因为这条命令会重写工作区.检出命令的用法如下: 用法一: git che ...
- Javascript做图片无缝平滑滚动
因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- 分布式算法(一致性Hash算法)
一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...
- [转载][jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
参考 [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 ---------------------------------------- ...
- 浅谈用java解析xml文档（二）
上一文中总结了dom解析xml文档的方式,本文开始总结使用SAX解析xml 的方式及它的优缺点! SAX(Simple API for XML),是指一种接口,或者一个软件包. 首先我们应该知道SAX ...
- JavaScript 数组方法总结
最近公司没项目.所以所幸学学JS.毕竟很多人和我一样.属于培训机构出来的.JS基础也很差. 面试的时候面试官问你 .你会JS不.你会毫不犹豫的回答会.因为你确实用过.但是真正会的或许只是以前项目中需要 ...
- 【开发】Form Validate 表单验证 扩展应用
目录: ★.文本输入框(easyui-textbox) ★.数字框(easyui-numberbox) ★.时间(easyui-datebox) ★.文本域(easyui-textbox easyui ...
- NOIP（提高组）DAY1国王游戏
问题描述 恰逢H国国庆,国王邀请n位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这n位大臣排成一排,国王站在队伍的最前面.排好队 ...
- [leetcode] 406. Queue Reconstruction by Height
https://leetcode.com/contest/6/problems/queue-reconstruction-by-height/ 分析:每个表示成(a,b)的形式,其实找第一个,就是b为 ...
- 初识XML及简单工厂运用--网络电视精灵
网络电视精灵 任务描述 1. 解析XML文件中的数据 三个简单的xml文件; <?xml version="1.0" encoding="utf-8" ? ...