應用場景是這個樣子的：要做導出數據到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: 500, height: 300, 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 = 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