运行效果:

之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,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=,
    
            /// <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 = ;
                    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 = ;
                    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 = "";
                ; i < chartData.XAxisData.Length; i++)
                {
                    )
                    {
                        chartData.xAxisDataStr += ",";
                    }
    
                    chartData.xAxisDataStr += "'" + chartData.XAxisData[i] + "'";
                }
                #endregion
    
                #region 转换y轴分组数据
                //转换y轴分组数据
                chartData.yAxisDataStr = "";
                ;
                foreach (var item in chartData.YAxisData.Keys)
                {
                    string yData = "";
                    ; i < chartData.YAxisData[item].Length; i++)
                    {
                        )
                        {
                            yData += ",";
                        }
                        yData += chartData.YAxisData[item][i];
                    }
    
                    )
                    {
                        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));
            }

简易的highcharts公共绘图模块封装--基于.net mvc的更多相关文章

  1. Java 9 揭秘(9. 打破模块封装)

    Tips 做一个终身学习的人. 在此章节中,主要介绍以下内容: 什么是打破模块的封装 如何使用命令行选项将依赖项(添加需要)添加到模块 如何使用--add-exports命令行选项导出模块的未导出包, ...

  2. 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager

    本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...

  3. 系统中异常公共处理模块 in spring boot

    最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...

  4. Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装

    Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装 简介 Magicodes.Pay,是心莱科技团队提供的统一支付库,相关库均使用.NET标准库编写,支持.NET Framew ...

  5. react封装基于axios的API请求

    一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const Method ...

  6. JavaScript 模块封装

    JavaScript 模块封装 前言介绍 在最早的时候JavaScript这门语言其实是并没有模块这一概念,但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势. 在这篇文章 ...

  7. python解析xml模块封装代码

    在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...

  8. 如何将自己写的verilog模块封装成IP核

    如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...

  9. python + selenium 模块封装及参数化

    模块封装 示例代码: baidu.py from time import sleep from selenium import webdriver driver = webdriver.Chrome( ...

随机推荐

  1. dell vfoglight

    vFoglight针对RH/Vmware/Hyper-v/Vsphere环境的相关软件包下载链接 https://software.dell.com/register/getfile/?param=2 ...

  2. 大众点评的大数据实践-CSDN.NET

    大众点评的大数据实践-CSDN.NET 大众点评的大数据实践 爬虫工程师成大数据时代的"宠儿" - 杭州新闻中心 - 杭州网 爬虫工程师成大数据时代的"宠儿"

  3. etc下

    用户账号与密码参数:  /etc/passwd  .  /etc/shadow 用户组相关方面的条件:     /etc/group   .   /etc/gshadow 用户个人文件数据:   /h ...

  4. AndroidHttp通信 HTTP Client与HttpURLConnection的区别

    Apache HTTP Client DefaultHttpClient 以及其相关类AndroidHttpClient 适用于 web browsers, 他们是可扩展的,并且拥有大量的稳定APIs ...

  5. sql语句书写升降序

    1, desc:降序,明天今天昨天,zyx...cba,.....321 sql语句:select * from SC_BackDiggingInfo where WriteDate<='201 ...

  6. 【Android - 基础】之Dialog分类及使用

    1.确定取消对话框 代码: // 使用AlertDialog.Builder初始化对话框 AlertDialog.Builder builder0 = new AlertDialog.Builder( ...

  7. Apache Shiro 集成-Cas

    http://blog.csdn.net/peterwanghao/article/details/8825008 Shiro集成CAS是在1.2版本里新增的功能. Shiro-cas模块将应用作为C ...

  8. ElasticSearch怎样加入,检索数据

    Elasticsearch是一个分布式的文档(document)存储引擎.它能够实时存储并检索复杂数据结构--序列化的JSON文档.换言说,一旦文档被存储在Elasticsearch中,它就能够在集群 ...

  9. MetaData Lock 杨奇龙 ---MYSQL博客专家

    http://blog.itpub.net/22664653/viewspace-1791608/ http://blog.csdn.net/dba_waterbin/article/details/ ...

  10. oracle用户管理入门

    1.创建一个新用户(普通) create user 用户名 identified by 密码 示例,创建一个名叫小明的用户,密码为xm 2.以管理员的身份给普通用户修改密码(当普通用户忘掉自己的密码时 ...