利用MVC Chart 打造后台图表、前端图表(转)

　http://www.cnblogs.com/nhsd/p/4514819.html

　应用场景是这个样子的：要做导出数据到PDF的功能，涉及到文本、表格、图表等内容。在做图表功能时，发现之前用Highcharts做的图表根本就不能集成到PDF中。这里需要一个能在程序后台就生成图表的功能，通过两个步骤进行集成：

　　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
}

四：后记

　　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