应用场景是这个样子的:要做导出数据到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 打造后台图表、前端图表的更多相关文章

  1. ASP.NET MVC 富文本Ueditor编辑 后台传值前端乱码解决方案

    只是将当前内容String当成Html插入,我想是跟数据类型转换差不多 //把内容赋值给ueditor var ue = UE.getEditor('editor');//实例化 ue.ready(f ...

  2. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  3. springmvc后台接前端的参数,数组,集合,复杂对象等

    springmvc后台接前端的参数,数组,集合,复杂对象等 参考地址:https://blog.csdn.net/feicongcong/article/details/54705933  常用的几种 ...

  4. Echarts一个页面加载多个图表及图表自适应

    Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...

  5. 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收

    利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介   WebUploader是由Baidu WebFE(FEX)团队开发的一 ...

  6. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  7. java后台对前端输入的特殊字符进行转义

    转自:http://www.cnblogs.com/yangzhilong/p/5667165.html java后台对前端输入的特殊字符进行转义 HTML: 常见的帮助类有2个:一个是spring的 ...

  8. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. 谈谈Windows Wow64

    欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/4977488.html 本文是<深入理解Windows操作系统 (第六版) >关于6 ...

  2. 复刻smartbits的国产网络测试工具minismb-使用burst模式

    复刻smartbits的国产网络性能测试工具minismb,是一款专门用于测试智能路由器,网络交换机的性能和稳定性的软硬件相结合的工具.可以通过此工具测试任何ip网络设备的端口吞吐率,带宽,并发连接数 ...

  3. vi/vim编辑器必知必会

    一.我们为什么要学习vim编辑器? Linux的命令行界面下面有非常多的文本编辑器.比如经常听说的就有Emacs.pico.nano.joe与vim等.vim可以看做是vi的高级版.我们为什么一定要学 ...

  4. 调用web service出现“请求被中止: 请求已被取消。”

    在制作(www.helpqy.com)的后台时,使用StreamWrite向httpwebrequest.getrequeststream中写入Post数据后,一调用httpwebresponse.g ...

  5. Android系统版本、Platform版本、SDK版本、gradle修改

    虽然之前分析了gradle,但是在eclipse导入Android studio的时候,各个版本出现的问题还是很模糊,下面对各种版本进行一下说明: 参考资料: https://developer.an ...

  6. 3D转弯保护区长啥样?

    3D转弯保护区长啥样? 2015-12-06 刘崇军 风螺旋线 在课本中.规范中看到的转弯保护区一直是平面化的样子.我们知道副区是由主区外扩而成,但具体怎样精确外扩无从知晓:我们知道主区边界至副区边界 ...

  7. 公众号开发之wx-tools+springboot应用实战-音乐爬虫推送[JAVA]

    springboot+wx-tools实践!音乐爬虫推送公众号DEMOGitHub地址:wx-tools 最终DEMO源码地址: music_collector 先理一下大概的开发步骤: 1. 创建一 ...

  8. C# List集合基础操作

    这里介绍一下C# list的基础操作: 去重.差集.并集.交集 下面,我们看看例子.我们创建了一个User实体,包含两个list,User实体如果Id相等,则相等. users1是id 1到4的集合, ...

  9. [转]magento性能优化的教程(非常详细)

    本文转自:https://www.sypopo.com/post/kMQE8dERoV/ 前面优化 mod_deflate模块,将text. css 和 javascript 先进行压缩再发送到浏览器 ...

  10. RowFilter遇上特殊字符*%'[]\

    开发时,时不时需要分析DataView的数据.计算,过滤等 .但是处理的值有可能会遇上是带有特殊字符*.%.'.[.]和\ .需要手动在表达式中,处理这些特殊字符,需要再使用"[" ...