利用MVC Chart 打造后台图表、前端图表
应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本、表格、图表等内容。在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中。这里需要一个能在程序后台就生成图表的功能,通过两个步骤进行集成:
1)将图表生成到一个图片文件中,存储在服务器上;
2)根据指定的图片路径,将图片集成到PDF。
那么集成的核心就为:如何在.net程序后台就生成一个图表。
这里介绍的是:
1)如何利用 Mvc Chart在程序的后台生成图表;
2)如何利用 Mvc Chart在前端生成图表。
必要条件:添加 using System.Web.Helpers;引用
一、在程序后台生成图表
先看下生成的效果:
制作这样一个图表,需要经过以下几个步骤:
Step 1:创建图表对象
Chart chart = new Chart(500, 400, ChartTheme.Blue);//ChartTheme:图表主题
Step 2:添加图表标题
chart.AddTitle(“2014年城市人口统计”);
Step 3:提供图表的数据点和系列特性,它包含以下几个部分
//提供图表的数据点和系列特性
chart.AddSeries(
name: “2014population”,//系列的唯一名称 做图例时有用
chartType: ChartType.Column.ToString(),//图表类型 柱状图、折线图、饼图...
xValue: new List<string>() { "北京", "上海", "广州", "深圳", "重庆" },//要沿 X 轴绘制的值
yValues: new List<float>() { 1962.24f, 2301.91f, 1270.08f, 1035.79f, 2884.62f }//要沿 Y 轴绘制的值
);
Step 4:设置X轴和Y轴的值
chart.SetXAxis(“城市”);
chart.SetYAxis(“人口”);
Step 5:保存图片
chart.Save(“D:\2014population.jpeg”);
现在,打完收功。名为:2014population.jpeg的图片就已经生成在指定的路径下了。有没有觉得很简单、快速?
可现在是一个Y轴只有一个值,当有多个值时怎么办呢?即要使之达到下面这样的效果:
现在,我们通过在前台生成的方式来看这样的效果是如何达到的:
二:在程序前端生成图表
在前面的第三步:Step 3:提供图表的数据点和系列特性 里,提供了生成图表的数据来源。如果要使一个Y轴对象有多个值,达到上面的效果,只需要再写一个 AddSeries(... ...),即可。除此之外,你还需要:
将 .Save(...)修改为:.Write()
是的,前台和后台生成图表的差别,就只有这一处。来看看在前端生成图表的完整代码:
<div>
@{
Chart t2 = new Chart(width: , height: , theme: ChartTheme.Blue)
.AddTitle("2013~2014城市人口统计")
.AddLegend("年份")
.SetXAxis("城市")
.SetYAxis("人口 【单位:万人】")
.AddSeries(
name: "2013年",
xValue: new[] {
"北京",
"上海",
"广州",
"深圳",
"重庆" },
yValues: new[] {
1962.24f,
2301.91f,
1270.08f,
1035.79f,
2884.62f
}
)
.AddSeries(
name: "2014年",
xValue: new[] {
"北京",
"上海",
"广州",
"深圳",
"重庆" },
yValues: new[] {
234.24f,
4234.91f,
2342.08f,
4234.79f,
2342.62f
}
)
.Write();
}
</div>
三:封装
为方便图片的生成,对在后台生成的代码做如下的封装:
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 = ;
private const int chartHeight = ;
/// <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 = , int height = , 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 = ,
/// <summary>
/// 快速点图类型
/// </summary>
FastPoint = ,
/// <summary>
/// 气泡图类型
/// </summary>
Bubble = ,
/// <summary>
/// 折线图类型
/// </summary>
Line = ,
/// <summary>
/// 样条图类型
/// </summary>
Spline = ,
/// <summary>
/// 阶梯线图类型
/// </summary>
StepLine = ,
/// <summary>
/// 快速扫描线图类型
/// </summary>
FastLine = ,
/// <summary>
/// 条形图类型
/// </summary>
Bar = ,
/// <summary>
/// 堆积条形图类型
/// </summary>
StackedBar = ,
/// <summary>
/// 百分比堆积条形图类型
/// </summary>
StackedBar100 = ,
/// <summary>
/// 柱形图类型
/// </summary>
Column = ,
/// <summary>
/// 堆积柱形图类型
/// </summary>
StackedColumn = ,
/// <summary>
/// 百分比堆积柱形图类型
/// </summary>
StackedColumn100 = ,
/// <summary>
/// 面积图类型
/// </summary>
Area = ,
/// <summary>
/// 样条面积图类型
/// </summary>
SplineArea = ,
/// <summary>
/// 堆积面积图类型
/// </summary>
StackedArea = ,
/// <summary>
/// 百分比堆积面积图类型
/// </summary>
StackedArea100 = ,
/// <summary>
/// 饼图类型
/// </summary>
Pie = ,
/// <summary>
/// 圆环图类型
/// </summary>
Doughnut = ,
/// <summary>
/// 股价图类型
/// </summary>
Stock = ,
/// <summary>
/// 线图类型
/// </summary>
Candlestick = ,
/// <summary>
/// 范围图类型
/// </summary>
Range = ,
/// <summary>
/// 样条范围图类型
/// </summary>
SplineRange = ,
/// <summary>
/// 范围条形图类型
/// </summary>
RangeBar = ,
/// <summary>
/// 范围柱形图类型
/// </summary>
RangeColumn = ,
/// <summary>
/// 雷达图类型
/// </summary>
Radar = ,
/// <summary>
/// 极坐标图类型
/// </summary>
Polar = ,
/// <summary>
/// 误差条形图类型
/// </summary>
ErrorBar = ,
/// <summary>
/// 盒须图类型
/// </summary>
BoxPlot = ,
/// <summary>
/// 砖形图类型
/// </summary>
Renko = ,
/// <summary>
/// 新三值图类型
/// </summary>
ThreeLineBreak = ,
/// <summary>
/// 卡吉图类型
/// </summary>
Kagi = ,
/// <summary>
/// 点数图类型
/// </summary>
PointAndFigure = ,
/// <summary>
/// 漏斗图类型
/// </summary>
Funnel = ,
/// <summary>
/// 棱锥图类型
/// </summary>
Pyramid = ,
}
#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
}
四:后记
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 打造后台图表、前端图表的更多相关文章
- ASP.NET MVC 富文本Ueditor编辑 后台传值前端乱码解决方案
只是将当前内容String当成Html插入,我想是跟数据类型转换差不多 //把内容赋值给ueditor var ue = UE.getEditor('editor');//实例化 ue.ready(f ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- springmvc后台接前端的参数,数组,集合,复杂对象等
springmvc后台接前端的参数,数组,集合,复杂对象等 参考地址:https://blog.csdn.net/feicongcong/article/details/54705933 常用的几种 ...
- Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
- 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收
利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- java后台对前端输入的特殊字符进行转义
转自:http://www.cnblogs.com/yangzhilong/p/5667165.html java后台对前端输入的特殊字符进行转义 HTML: 常见的帮助类有2个:一个是spring的 ...
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- 谈谈Windows Wow64
欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4977488.html 本文是<深入理解Windows操作系统 (第六版) >关于6 ...
- 复刻smartbits的国产网络测试工具minismb-使用burst模式
复刻smartbits的国产网络性能测试工具minismb,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数 ...
- vi/vim编辑器必知必会
一.我们为什么要学习vim编辑器? Linux的命令行界面下面有非常多的文本编辑器.比如经常听说的就有Emacs.pico.nano.joe与vim等.vim可以看做是vi的高级版.我们为什么一定要学 ...
- 调用web service出现“请求被中止: 请求已被取消。”
在制作(www.helpqy.com)的后台时,使用StreamWrite向httpwebrequest.getrequeststream中写入Post数据后,一调用httpwebresponse.g ...
- Android系统版本、Platform版本、SDK版本、gradle修改
虽然之前分析了gradle,但是在eclipse导入Android studio的时候,各个版本出现的问题还是很模糊,下面对各种版本进行一下说明: 参考资料: https://developer.an ...
- 3D转弯保护区长啥样?
3D转弯保护区长啥样? 2015-12-06 刘崇军 风螺旋线 在课本中.规范中看到的转弯保护区一直是平面化的样子.我们知道副区是由主区外扩而成,但具体怎样精确外扩无从知晓:我们知道主区边界至副区边界 ...
- 公众号开发之wx-tools+springboot应用实战-音乐爬虫推送[JAVA]
springboot+wx-tools实践!音乐爬虫推送公众号DEMOGitHub地址:wx-tools 最终DEMO源码地址: music_collector 先理一下大概的开发步骤: 1. 创建一 ...
- C# List集合基础操作
这里介绍一下C# list的基础操作: 去重.差集.并集.交集 下面,我们看看例子.我们创建了一个User实体,包含两个list,User实体如果Id相等,则相等. users1是id 1到4的集合, ...
- [转]magento性能优化的教程(非常详细)
本文转自:https://www.sypopo.com/post/kMQE8dERoV/ 前面优化 mod_deflate模块,将text. css 和 javascript 先进行压缩再发送到浏览器 ...
- RowFilter遇上特殊字符*%'[]\
开发时,时不时需要分析DataView的数据.计算,过滤等 .但是处理的值有可能会遇上是带有特殊字符*.%.'.[.]和\ .需要手动在表达式中,处理这些特殊字符,需要再使用"[" ...