利用MVC Chart 打造后台图表、前端图表
2015-05-19 16:11
274 查看
应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本、表格、图表等内容。在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中。这里需要一个能在程序后台就生成图表的功能,通过两个步骤进行集成:
1)将图表生成到一个图片文件中,存储在服务器上;
2)根据指定的图片路径,将图片集成到PDF。
那么集成的核心就为:如何在.net程序后台就生成一个图表。
这里介绍的是:
1)如何利用 Mvc Chart在程序的后台生成图表;
2)如何利用 Mvc Chart在前端生成图表。
必要条件:添加 using System.Web.Helpers;引用
View Code
程序环境:Win8.1, Visual Studio 2013 Professional 2013 Update3, MVC 4, System.Web.Helpers 程序版本v2.0.0 运行时版本v4.0.30319
1)将图表生成到一个图片文件中,存储在服务器上;
2)根据指定的图片路径,将图片集成到PDF。
那么集成的核心就为:如何在.net程序后台就生成一个图表。
这里介绍的是:
1)如何利用 Mvc Chart在程序的后台生成图表;
2)如何利用 Mvc Chart在前端生成图表。
必要条件:添加 using System.Web.Helpers;引用
一、在程序后台生成图表
先看下生成的效果:using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Helpers; namespace Seal_Common { /// <summary> /// 绘制图表,并保存在服务器中[必要引用::System.Web.Helpers] /// </summary> public class ChartHelper { private const int chartWidth = 380; private const int chartHeight = 300; /// <summary> /// 后台生成图片, 并保存在服务器中 /// </summary> /// <param name="name">系列的唯一名称 做图例时有用</param> /// <param name="title">图表标题</param> /// <param name="names">list string 名称(坐标轴中的X轴)</param> /// <param name="values">list float 值(坐标轴中的Y轴)</param> /// <param name="saveurl">保存到服务的URL</param> /// <param name="charttype">图表类型 默认为柱形图 ChartType.Column</param> /// <param name="width">宽度 默认500</param> /// <param name="height">高度 默认300</param> /// <param name="Xtitle">X轴标题</param> /// <param name="Ytitle">Y轴标题</param> /// <param name="charttheme">图表样式</param> public void GenerateChart(string name, string title, List<string> names, List<float> values, string saveurl, ChartType charttype, int width = 500, int height = 300, string Xtitle = "", string Ytitle = "", string charttheme = ChartTheme.Vanilla) { try { DateTime dt = DateTime.Now; Chart chart = new Chart(width, height, charttheme.ToString()); chart.AddTitle(title); chart.AddSeries( name: name, chartType: charttype.ToString(), xValue: names, yValues: values ); chart.SetXAxis(Xtitle); chart.SetYAxis(Ytitle); chart.Save(saveurl); } catch (Exception ex) { } } } /// <summary> /// 图表类型 /// </summary> public enum ChartType { /// <summary> /// 点图类型 /// </summary> Point = 0, /// <summary> /// 快速点图类型 /// </summary> FastPoint = 1, /// <summary> /// 气泡图类型 /// </summary> Bubble = 2, /// <summary> /// 折线图类型 /// </summary> Line = 3, /// <summary> /// 样条图类型 /// </summary> Spline = 4, /// <summary> /// 阶梯线图类型 /// </summary> StepLine = 5, /// <summary> /// 快速扫描线图类型 /// </summary> FastLine = 6, /// <summary> /// 条形图类型 /// </summary> Bar = 7, /// <summary> /// 堆积条形图类型 /// </summary> StackedBar = 8, /// <summary> /// 百分比堆积条形图类型 /// </summary> StackedBar100 = 9, /// <summary> /// 柱形图类型 /// </summary> Column = 10, /// <summary> /// 堆积柱形图类型 /// </summary> StackedColumn = 11, /// <summary> /// 百分比堆积柱形图类型 /// </summary> StackedColumn100 = 12, /// <summary> /// 面积图类型 /// </summary> Area = 13, /// <summary> /// 样条面积图类型 /// </summary> SplineArea = 14, /// <summary> /// 堆积面积图类型 /// </summary> StackedArea = 15, /// <summary> /// 百分比堆积面积图类型 /// </summary> StackedArea100 = 16, /// <summary> /// 饼图类型 /// </summary> Pie = 17, /// <summary> /// 圆环图类型 /// </summary> Doughnut = 18, /// <summary> /// 股价图类型 /// </summary> Stock = 19, /// <summary> /// 线图类型 /// </summary> Candlestick = 20, /// <summary> /// 范围图类型 /// </summary> Range = 21, /// <summary> /// 样条范围图类型 /// </summary> SplineRange = 22, /// <summary> /// 范围条形图类型 /// </summary> RangeBar = 23, /// <summary> /// 范围柱形图类型 /// </summary> RangeColumn = 24, /// <summary> /// 雷达图类型 /// </summary> Radar = 25, /// <summary> /// 极坐标图类型 /// </summary> Polar = 26, /// <summary> /// 误差条形图类型 /// </summary> ErrorBar = 27, /// <summary> /// 盒须图类型 /// </summary> BoxPlot = 28, /// <summary> /// 砖形图类型 /// </summary> Renko = 29, /// <summary> /// 新三值图类型 /// </summary> ThreeLineBreak = 30, /// <summary> /// 卡吉图类型 /// </summary> Kagi = 31, /// <summary> /// 点数图类型 /// </summary> PointAndFigure = 32, /// <summary> /// 漏斗图类型 /// </summary> Funnel = 33, /// <summary> /// 棱锥图类型 /// </summary> Pyramid = 34, } #region 使用方式 // ChartHelper charthelper = new ChartHelper(); // string saveurl = @"C:\Users\zq\Documents\visual studio 2013\Projects\Seal_Main\Seal_Console\bin\Debug\PDFDOCUMENT\123.jpeg"; // List<string> names = new List<string>() { // "北京", // "上海", // "广州", // "深圳", // "重庆" // }; // List<float> values = new List<float>() { // 1962.24f, // 2301.91f, // 1270.08f, // 1035.79f, // 2884.62f // }; // charthelper.GenerateChart("2013~2014城市人口统计", names, values, saveurl, ChartType.Column, 500, 400, "城市", "人口", ChartTheme.Vanilla); #endregion }
View Code
四:后记
Mvc Chart做为一个轻量的VS自带图表插件,操作过程简单、快速。但默认样式过于简陋,如果要自定义样式,并不轻松,可尝试ChartTheme的自定义扩展。另外,为了更好的体验效果,Mvc Chart并不能替代Highcharts等前端JS图表插件。程序环境:Win8.1, Visual Studio 2013 Professional 2013 Update3, MVC 4, System.Web.Helpers 程序版本v2.0.0 运行时版本v4.0.30319
相关文章推荐
- 利用MVC Chart 打造后台图表、前端图表(转)
- 利用office web component打造精品图表
- 利用office web component打造精品图表(二)
- 利用office web component打造精品图表(一)
- 利用office web component打造精品图表(一)
- 【备忘】Spring Boot从前端到后台打造企业级博客全栈实战视频
- 利用office web component打造精品图表(二)
- SpringMVC+Hibernate利用ajax实现前端后台数据交互
- nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口
- 使用nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口
- Angular14 利用Angular2实现文件上传的前端、利用springBoot实现文件上传的后台
- 利用ajax提交表单,实现数据前端后台数据交互的完整流程演示
- 前端利用ajax后台用struts实现账号唯一性检验
- 利用office web component打造精品图表(一) 选择自 online 的 Blog
- 利用office web component打造精品图表(二) 选择自 online 的 Blog
- 【Ajax】(1)Ajax的原理,利用点对点通讯将前端页面输入的信息发送到后台进行检验
- 利用ng-model把前端获取的值和后台传过来的值进行双向绑定
- Django前端与后台数据交互:用json传输数据到javascript来画hichart图表
- 前端页面利用AJAX将数组数据传送到后台
- 利用c#和webbrowser轻松打造注册机和回帖机