运行效果:

之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,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. map/reduce实现 排序

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.co ...

  2. 初学python(print使用、条件分支、循环、模块引用)

    import random """ #查看源代码日后爬虫用 import urllib.request # coding=utf-8 url = "http:/ ...

  3. 为什么 UDP 有时比 TCP 更有优势

    随着网络技术飞速发展,网速已不再是传输的瓶颈,UDP协议以其简单.传输快的优势,在越来越多场景下取代了TCP,如网页浏览.流媒体.实时游戏.物联网. 1.网速的提升给UDP稳定性提供可靠网络保障 CD ...

  4. weblogic开发模式与生产模式介绍

    weblogic开发模式与生产模式介绍 开发模式:该模式启用自动部署 生产模式:该模式关闭自动部署 weblogic server 三种部署方法:自动部署.控制台部署.命令部署 自动部署:当其处于启用 ...

  5. ACMDP之最长公共子序列长度—HDU1159

    Common Subsequence Problem Description A subsequence of a given sequence is the given sequence with ...

  6. 键盘事件与JS Filter

    今天在写一个JS输入文本过滤的程序,本来我的设想是在keypress事件中获取按下的键,然后再进行判断,这样的话总是出错,最后终于明白自己把事件的发生顺序搞错了,应该是先keydown,然后是keyp ...

  7. Android MediaPlayer Error/Info Code

    1. 常见错误 error(-38, 0) 我觉得-38表示在当前的MediaPlayer状态下,不能运行你的操作. 详细怎样做请參考:Android MediaPlayer 另外我在其它资料中.发现 ...

  8. 在Delphi中实现HexToStr函数和StrToHex函数

    function TransChar(AChar: Char): Integer; begin '] then Result := Ord(AChar) - Ord(') else Result := ...

  9. [Webpack 2] Hashing with Webpack for long term caching

    Leveraging the browser cache is an important part of page load performance. A great way to utilize t ...

  10. careercup-数组和字符串1.1

    1.1 实现一个算法,确定一个字符串的所有字符是否全部不同.假设不允许使用额外的数据结构,又该如何处理? C++实现: #include<iostream> #include<str ...