简易的highcharts公共绘图模块封装--基于.net mvc

Posted 2020-06-19

运行效果：

 

 

之所以选择这个图表插件，是因为它较其他同类插件轻量且中文文档详细完整，Demo丰富，配置使用简单。具体内容请登录中文官网：http://www.hcharts.cn/

 

项目详细：

项目环境:win10+visual studio 2015 +.net framework 4.5

后台技术：.net mvc + c#

前端技术：Matrixadmin（国外的一款基于bootstrap的后台模板框架）+jquery+highcharts

 

　　代码实现：

1. 设定系统目前支持的图表类型：EnumChartType.cs(以后可以扩充此文件以支持更多的图表类型)
   

       public enum EnumChartsType:short
       {
           /// <summary>
           /// 柱形图
           /// </summary>
           column=1,
   
           /// <summary>
           /// 折线图
           /// </summary>
           line,
   
           /// <summary>
           /// 条形图
           /// </summary>
           bar,
   
           /// <summary>
           /// 曲线图
           /// </summary>
           spline,
   
           /// <summary>
           /// 区域图
           /// </summary>
           area
       }

    

2. 封装用于序列化反序列化Json数据的工具类：CommonJson.cs(Json数据用于highcharts的数据源)
   

           /// <summary>
           /// 序列化
           /// </summary>
           /// <typeparam name="T"></typeparam>
           /// <param name="obj"></param>
           /// <returns></returns>
           public static string Serialize(object obj)
           {
               DataContractJsonSerializer jsonFormater = new DataContractJsonSerializer(obj.GetType());
   
               using (MemoryStream ms = new MemoryStream())
               {
                   jsonFormater.WriteObject(ms, obj);
                   ms.Position = 0;
                   using (StreamReader sr = new StreamReader(ms))
                   {
                       return sr.ReadToEnd();
                   }
               }
           }
   
           /// <summary>
           /// 反序列化
           /// </summary>
           /// <typeparam name="T"></typeparam>
           /// <param name="jsonDatas"></param>
           /// <param name="encoding"></param>
           /// <returns></returns>
           public static T Deserialize<T>(string jsonDatas)
               where T : class
           {
               return Deserialize(jsonDatas, typeof(T)) as T;
           }
   
           public static object Deserialize(string jsonDatas, Type t)
           {
               DataContractJsonSerializer jsonFormater = new DataContractJsonSerializer(t);
               byte[] buffer = Encoding.Unicode.GetBytes(jsonDatas);
               using (MemoryStream ms = new MemoryStream(buffer))
               {
                   ms.Position = 0;
                   object obj = jsonFormater.ReadObject(ms);
                   return obj;
               }
           }

    

3. 封装highcharts的数据源类ChartData.cs
   

       /// <summary>
       /// HighCharts数据封装类
       /// </summary>
       public class ChartData
       {
           /// <summary>
           /// 图表类型
           /// </summary>
           public int ChartType { set; get; }
   
           /// <summary>
           /// 图表标题
           /// </summary>
           public string ChartTitle { set; get; }
   
           /// <summary>
           /// x轴分组
           /// </summary>
           public string [] XAxisData{set;get;}
   
           /// <summary>
           /// y轴标题
           /// </summary>
           public string YAxisTitle { set; get; }
   
           /// <summary>
           /// y轴数据(key:列名称,value=列数据)
           /// </summary>
           public Dictionary<string, decimal[]> YAxisData { set; get; }
   
           //处理后
           public string xAxisDataStr { set; get; }
           public string yAxisDataStr { set; get; }
   
       }

    

4. 创建绘制图表的公共模块，包括：
   Controller：
   

           /// <summary>
           /// 图表绘制公用
           /// </summary>
           /// <returns></returns>
           public ActionResult Index()
           {
   
               var data = Request.QueryString["data"];
               ChartData chartData = CommonJson.Deserialize<ChartData>(data);
   
               #region 转换x轴分组数据
               //转换x轴分组数据
               chartData.xAxisDataStr = "";
               for (int i = 0; i < chartData.XAxisData.Length; i++)
               {
                   if (i != 0)
                   {
                       chartData.xAxisDataStr += ",";
                   }
   
                   chartData.xAxisDataStr += "‘" + chartData.XAxisData[i] + "‘";
               } 
               #endregion
   
               #region 转换y轴分组数据
               //转换y轴分组数据
               chartData.yAxisDataStr = "";
               int tab = 0;
               foreach (var item in chartData.YAxisData.Keys)
               {
                   string yData = "";
                   for (int i = 0; i < chartData.YAxisData[item].Length; i++)
                   {
                       if (i != 0)
                       {
                           yData += ",";
                       }
                       yData += chartData.YAxisData[item][i];
                   }
   
                   if (tab != 0)
                   {
                       chartData.yAxisDataStr += ",";
                   }
   
                   chartData.yAxisDataStr = "{name:‘" + item + "‘,data:[" + yData + "]}";
   
                   tab++;
               } 
               #endregion
               return View(chartData);
           }

   
   View：（其中，@html.Raw()的作用是将字符串原文输出，因为从后台传到前台的字符串.net默认会进行转码，当字符串中有单引号等特殊字符时数据会失真）
   

   @model CollegeManager.Common.Models.ChartData
   @using System.Collections.Generic;
   @using CollegeManager.Common.Utils;
   @{
       ViewBag.Title = "柱形图";
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
   
   <script type="text/javascript">
       $(function () {
           $(‘#container‘).highcharts(
               {
                   chart: { type: ‘@Html.Raw(((EnumChartsType)Model.ChartType).ToString())‘ },
                   title: { text: ‘@Html.Raw(Model.ChartTitle)‘ },
                   xAxis: {
                       categories: [@Html.Raw(Model.xAxisDataStr)]
                   },
                   yAxis: { title: {text:‘@Model.YAxisTitle‘}},
                   series: [@Html.Raw(Model.yAxisDataStr)]
               }
               );
   
       });
   </script>
   <div id="container" style="min-width: 600px; height: 350px"></div>

    

5. 供js或jquery调用的需要绘图功能的模块中的方法，用以给绘图模块封装数据
   

           public JsonResult ChartJson()
           {
   
               #region 构造数据
               ChartData chartData = new ChartData();
               chartData.ChartType = (int)EnumChartsType.column;
               chartData.ChartTitle = "柱形图测试用例";
   
               //x轴数据
               chartData.XAxisData = ...... //此处略去
   
               chartData.YAxisTitle += "单位：元";    //y轴标题
   
               chartData.YAxisData = ...... //此处略去
   
               //y轴分组名称
               string yName = "";
   
               //y轴分组数据
               decimal[] yData = new decimal[chartData.XAxisData.Length];
   
               chartData.YAxisData.Add(yName, yData);
               #endregion
   
               return Json(CommonJson.Serialize(chartData));
           }