简易的highcharts公共绘图模块封装--基于.net mvc
运行效果:
之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单。具体内容请登录中文官网:http://www.hcharts.cn/
项目详细:
项目环境:win10+visual studio 2015 +.net framework 4.5
后台技术:.net mvc + c#
前端技术:Matrixadmin(国外的一款基于bootstrap的后台模板框架)+jquery+highcharts
代码实现:
- 设定系统目前支持的图表类型:EnumChartType.cs(以后可以扩充此文件以支持更多的图表类型)
public enum EnumChartsType:short { /// <summary> /// 柱形图 /// </summary> column=, /// <summary> /// 折线图 /// </summary> line, /// <summary> /// 条形图 /// </summary> bar, /// <summary> /// 曲线图 /// </summary> spline, /// <summary> /// 区域图 /// </summary> area }
- 封装用于序列化反序列化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; } }
- 封装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; } }
- 创建绘制图表的公共模块,包括:
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>
- 供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的更多相关文章
- Java 9 揭秘(9. 打破模块封装)
Tips 做一个终身学习的人. 在此章节中,主要介绍以下内容: 什么是打破模块的封装 如何使用命令行选项将依赖项(添加需要)添加到模块 如何使用--add-exports命令行选项导出模块的未导出包, ...
- 【直接拿来用のandroid公共代码模块解析与分享】の Notification和NotificationManager
本文源代码托管在https://github.com/ASCE1885/asce-common,欢迎fork Android项目做得多了.会发现原来非常多基础的东西都是能够复用,这个系列介绍一些自己项 ...
- 系统中异常公共处理模块 in spring boot
最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...
- Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装
Magicodes.Pay,打造开箱即用的统一支付库,已提供ABP模块封装 简介 Magicodes.Pay,是心莱科技团队提供的统一支付库,相关库均使用.NET标准库编写,支持.NET Framew ...
- react封装基于axios的API请求
一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const Method ...
- JavaScript 模块封装
JavaScript 模块封装 前言介绍 在最早的时候JavaScript这门语言其实是并没有模块这一概念,但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势. 在这篇文章 ...
- python解析xml模块封装代码
在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...
- 如何将自己写的verilog模块封装成IP核
如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...
- python + selenium 模块封装及参数化
模块封装 示例代码: baidu.py from time import sleep from selenium import webdriver driver = webdriver.Chrome( ...
随机推荐
- container_of宏剖析
container_of宏剖析//该宏位于include/linux/kernel.h 1.定义格式 /** * container_of - cast a member of a structure ...
- 字符编码笔记:ASCII,Unicode和UTF-8,附带 Little endian和Big endian的解释
作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...
- linux 下查看网速的方法 (不需要安装任何软件)
sudo watch -n 1 "/sbin/ifconfig eth0 | grep -E \"字节|数据包\"" 若是英文版linux: sudo watc ...
- [struts2]Struts遍历标签<s:iterator>总结 [转]
转至:http://blog.csdn.net/lufeng66/article/details/7338098 struts2的s:iterator 可以遍历 数据栈里面的任何数组,集合等等 以下几 ...
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 初识Android
#Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R.java:项目中所有资源文件的资源id Android.jar:Android的jar包,导入此包方可使 ...
- Day 3 @ RSA Conference Asia Pacific & Japan 2016 (morning)
09.00 – 09.45 hrs Tracks Cloud, Mobile, & IoT Security A New Security Paradigm for IoT (Inter ...
- Android怎样改动app不在多任务列表中显示
在实际开发中,我们希望某些activity或者应用程序不在多任务列表中显示,即长按Home键或者多任务button键不显示近期执行的程序,我们能够在对应应用程序的AndroidManifest.xml ...
- FastDFS、nginx配置手记
第一部分 FastDFS介绍 1.FastDFS是什么 FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实现,支持Linux.FreeBSD.AIX等UNIX系统.它只能 ...
- Java基础知识强化之IO流笔记26:FileInputStream / FileOutputStream 复制mp4视频的案例
1. 需求:把D:\\English.mp4 复制到当前项目目录下copy.mp4 代码示例: package com.himi.filecopy; import java.io.FileInput ...