日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) > 编程语言 > asp.net >内容正文

asp.net

在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

發(fā)布時(shí)間:2024/4/14 asp.net 43 豆豆
生活随笔 收集整理的這篇文章主要介紹了 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.準(zhǔn)備工作:
網(wǎng)上下載highcharts導(dǎo)出的關(guān)鍵dll。
????? 1)、Svg.dll:因?yàn)閔ighcharts的格式其實(shí)就是一個(gè)xml,采用svg的方式畫(huà)圖;
????? 2)、itextsharp.dll:這樣主要是用于處理和提取highcharts圖表內(nèi)的文字以及編碼問(wèn)題;

2.創(chuàng)建一個(gè)簡(jiǎn)單asp.net項(xiàng)目,并把上述兩個(gè)程序集引入到項(xiàng)目中,OK。
3.給出頁(yè)面代碼:

<%@ 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: 1},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="保存圖表至服務(wù)器(默認(rèn)保存為PNG格式可自行調(diào)整)" οnclick="SaveChart()" /></div><script type="text/javascript" language="javascript">//也可以直接用異步提交方式,這樣可以防止頁(yè)面刷新 function ExportChart() {$.ajax({type: 'POST', //post方式異步提交async: false, //同步提交url: "/highcharts_export.aspx", //導(dǎo)出圖表的服務(wù)頁(yè)面地址dataType: "json", //傳遞方式為json//幾個(gè)重要的參數(shù) 如果這里不傳遞width的話,需要修改導(dǎo)出服務(wù)頁(yè)面內(nèi)的Request.Form["width"].ToString() 把這句代碼注釋掉即可data: { type: 'image/png', filename: 'MyChartTest', width: 400, svg: chart.getSVG() },success: function (msg) {alert("圖表導(dǎo)出成功!");},error: function (errorMsg) {if (errorMsg.statusText == "OK") {alert("圖表導(dǎo)出成功!");} else {alert("圖表導(dǎo)出失敗!");}}});}//保存圖表 function SaveChart() {chart.exportChart({type: 'image/png',filename: 'mychart'});}</script> </body></html>

4.服務(wù)器上的代碼:

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){//判斷參數(shù)是否正確//type是可以自己指定的導(dǎo)出類型//svg是默認(rèn)傳遞的//filename是可以自己指定的文件名if (Request.Form["type"] != null && Request.Form["svg"] != null && Request.Form["filename"] != null){//獲得相應(yīng)參數(shù)string tType = Request.Form["type"].ToString();string tSvg = Request.Form["svg"].ToString();string tFileName = Request.Form["filename"].ToString();if (tFileName == ""){tFileName = "chart";}//將svg轉(zhuǎn)換為二進(jìn)制流 特別注意了:這里將svg轉(zhuǎn)換成二進(jìn)制流時(shí),一定要選擇正確的編碼格式,//否則,導(dǎo)出來(lái)的圖片中中文有亂碼,如下面的編碼,肯定會(huì)出現(xiàn)亂碼,我們應(yīng)該改成UTF8,才不會(huì)出現(xiàn)亂碼 MemoryStream tData = new MemoryStream(Encoding.ASCII.GetBytes(tSvg));MemoryStream tStream = new MemoryStream();string tTmp = new Random().Next().ToString();string tExt = "";string tTypeString = "";//獲取導(dǎo)出類型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 documenttDocumentPdf = new Document(new iTextSharp.text.Rectangle((float)tSvgObj.Width, (float)tSvgObj.Height));// setting up margin to full screen imagetDocumentPdf.SetMargins(0.0f, 0.0f, 0.0f, 0.0f);// creating imageiTextSharp.text.Image tGraph = iTextSharp.text.Image.GetInstance(tStream.ToArray());tGraph.ScaleToFit((float)tSvgObj.Width, (float)tSvgObj.Height);tStream = new MemoryStream();// Insert contenttWriter = 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;//將二進(jìn)制流保存為指定路徑下的具體文件 System.IO.File.WriteAllBytes(tFileName, tStream.ToArray());Response.Write("恭喜您,highcharts導(dǎo)出成功,路徑為" + tFileName); }}}}} }

5,這樣就可以將圖表下載到服務(wù)器的Report文件夾中了,ok,不謝!

6。著力推薦關(guān)于本文中所解決的問(wèn)題,讓更多的愛(ài)好者都能學(xué)習(xí)到如此經(jīng)典的方式。本文也是借鑒的。

http://www.stepday.com/topic/?594????? http://www.stepday.com/topic/?725

7.自己的一點(diǎn)感悟:

?????? 其實(shí),針對(duì)highcharts中的圖表,瀏覽器中呈現(xiàn)的是圖表,我們大多數(shù)人誤認(rèn)為這是張圖片,現(xiàn)在我想把這種觀念糾正,這圖表不是一張圖片,而是一個(gè)svg文件,文件中是種xml文件,從本文中完全可以體會(huì)到,本文中我們主要是將svg字符串存儲(chǔ)在二進(jìn)制流中(MemoryStream),然后通過(guò)Svgdocument對(duì)象Draw后一png格式存儲(chǔ)中流中,(tSvgObj.Draw().Save(tStream, ImageFormat.Png);),最后,直接寫(xiě)入對(duì)應(yīng)的文件中。

轉(zhuǎn)載于:https://www.cnblogs.com/ysq0908/p/6139287.html

總結(jié)

以上是生活随笔為你收集整理的在asp.net中如何自己编写highcharts图表导出到自己的服务器上来的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。