博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HighChart 体验之旅 (后台传递JSON参数和数据的方法)
阅读量:6693 次
发布时间:2019-06-25

本文共 21952 字,大约阅读时间需要 73 分钟。

转自:http://www.cnblogs.com/daviddai/archive/2013/04/12/Highchart.html

官网:

中文网:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage
" %><%@ Import Namespace="DavidHighChartDemo.Models" %>
HighChart Demo Gallary

HighChart Demo Gallary

<%=Html.Label("请选择图标:") %><%=Html.DropDownList("ddlChartType", new List
() { new SelectListItem() { Text = "混合型", Value=((int)HighchartTypeEnum.混合型).ToString(), Selected=true }, new SelectListItem() { Text = "饼图型", Value=((int)HighchartTypeEnum.饼图型).ToString() }, new SelectListItem() { Text = "柱状图", Value=((int)HighchartTypeEnum.柱状图).ToString() }, new SelectListItem() { Text = "多柱状图", Value=((int)HighchartTypeEnum.多柱状图).ToString() }, new SelectListItem() { Text = "多流线图", Value=((int)HighchartTypeEnum.多流线图).ToString() }, new SelectListItem() { Text = "多横柱图", Value=((int)HighchartTypeEnum.多横柱图).ToString() }, new SelectListItem() { Text = "层叠图", Value=((int)HighchartTypeEnum.层叠图).ToString() }, new SelectListItem() { Text = "区域图", Value=((int)HighchartTypeEnum.区域图).ToString() }, new SelectListItem() { Text = "温度计型", Value=((int)HighchartTypeEnum.温度计型).ToString() }, }, null, new { @onchange = "javascript:chartChangeEvent()" })%>
前台
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Threading;using DavidHighChartDemo.Models;using DavidHighChartDemo.Logic;namespace DavidHighChartDemo.Controllers{    public class DavidTestController : Controller    {        //        // GET: /DavidTest/        private DavidBusinessLogic logic = new DavidBusinessLogic();        public ActionResult HighCharts()        {            return View();        }        public JsonResult GetHighChartOptions()        {            int chartType = Request.Form["type"] == null ? (int)HighchartTypeEnum.混合型 : Convert.ToInt32(Request.Form["type"].ToString());            HighchartTypeEnum type = (HighchartTypeEnum)Enum.Parse(typeof(HighchartTypeEnum), chartType.ToString());            HighChartOptions chart = logic.GetHighchart(type);            return Json(new { value = chart, label = type.ToString() }, JsonRequestBehavior.AllowGet);        }    }}
Controller
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using System.Web.Routing;using System.Drawing;using DavidHighChartDemo.Models;namespace DavidHighChartDemo.Logic{    public class DavidBusinessLogic    {        public HighChartOptions GetHighchart(HighchartTypeEnum type)        {            HighChartOptions currentChart = new HighChartOptions();            switch (type)            {                case HighchartTypeEnum.混合型:                    {                        #region 混合型                        currentChart = new HighChartOptions()                        {                            chart = new Chart()                            {                                renderTo = "highChartDiv",                                type = ChartTypeEnum.area.ToString()                            },                            title = new Title() { text = "网站流量图" },                            xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, series = new List
() { new Series(){ name = "网易", data = new List
() { new object[2] { "中国", 511 }, new object[2] { "美国", 114 }, new object[2] { "英国", 345 }, new { name = "韩国", y = 622, sliced = true, selected = true }, new object[2] { "日本", 411 } }, type=ChartTypeEnum.pie.ToString(), showInLegend=true, size=100, center=new int[2]{
80,30}, allowPointSelect=true }, new Series { name = "新浪", data = new List { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.饼图型: { #region 饼图型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv", type = ChartTypeEnum.pie.ToString() }, title = new Title() { text = "地域流量图" }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { pointFormat = "{series.name}: {point.percentage}%
{series.name}:{point.y}", percentageDecimals = 2 }, series = new List
() { new Series(){ name="地域", data = new List
() { new object[2] { "中国", 511 }, new object[2] { "美国", 114 }, new object[2] { "英国", 345 }, new object[2] { "韩国", 622 }, new { name = "韩国", y = 622, sliced = true, selected = true }, new object[2] { "日本", 411 } }, showInLegend=false, size=270, center=new int[2]{ 700,150}, allowPointSelect=true } } }; #endregion }; break; case HighchartTypeEnum.柱状图: { #region 柱线图 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv" }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.多柱状图: { #region 多柱型图 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv" }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.column.ToString(), color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.多流线图: { #region 多流线型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv" }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false }, shared = true }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.多横柱图: { #region 多横柱型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv", type = ChartTypeEnum.bar.ToString() }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.层叠图: { #region 层叠型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv", type = ChartTypeEnum.column.ToString(), style = "width:100%; heigh:400px;" }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, plotOptions = new PlotOptions() { stacking = StackingTypeEnum.normal.ToString() }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.区域图: { #region 区域型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv", type = ChartTypeEnum.areaspline.ToString() }, title = new Title() { text = "网站流量图" }, xAxis = new List
() { new XAxis(){ categories = new List
() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List
() { true, false } }, series = new List
() { new Series { name = "新浪", data = new List
{ 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = new List { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = new List { 8, 7, 3, 2, 3 }, allowPointSelect=false, color= "#0088A8" } } }; #endregion }; break; case HighchartTypeEnum.温度计型: { #region 温度计型 currentChart = new HighChartOptions() { chart = new Chart() { renderTo = "highChartDiv", type = ChartTypeEnum.spline.ToString(), inverted = true }, title = new Title() { text = "Atmosphere Temperature by Altitude" }, subtitle = new SubTitle() { text = "According to the Standard Atmosphere Model" }, xAxis = new List
(){ new XAxis(){reversed=false, title=new Title(){text="Altitude"}, categories=null} }, yAxis = new YAxis() { title = new Title() { text = "Temperature" }, max = 20, min = -80 }, tooltip = new ToolTip() { headerFormat = "
{series.name}
", pointFormat = "{point.x} km: {point.y}°C", percentageDecimals = 2 }, series = new List
() { new Series(){ name="Temperature", size=null, showInLegend=false, data = new List
() { new object[2] { 0, 15 }, new object[2] { 10, -50 }, new object[2] { 20, -56.5 }, new object[2] { 30, -46.5 }, new object[2] { 40, -22.1 }, new object[2] { 50, -2.5 }, new object[2] { 60, -27.7 }, new object[2] { 70, -55.7 }, new object[2] { 80, -76.5 } } } } }; #endregion }; break; default: break; } return currentChart; } }}
Service
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace DavidHighChartDemo.Models{    ///     /// HighChart图形类,其中所有基本属性都需要与官网API名字相同,否则可能引起JS错误    ///     public class HighChartOptions    {        public HighChartOptions()        {            this.chart = new Chart();            this.title = new Title();            this.subtitle = new SubTitle();            this.xAxis = new List
(); this.yAxis = new YAxis(); this.series = new List
(); this.tooltip = new ToolTip(); this.plotOptions = new PlotOptions(); this.credits = new Credits(); this.exporting = new Exporting(); } public Chart chart { get; set; } public Title title { get; set; } public SubTitle subtitle { get; set; } public List
xAxis { get; set; } public YAxis yAxis { get; set; } public List
series { get; set; } public ToolTip tooltip { get; set; } public PlotOptions plotOptions { get; set; } public Credits credits { get; set; } public Exporting exporting { get; set; } } ///
/// 基础HighChart图形类 /// public class Chart { public Chart() { this.renderTo = string.Empty; this.type = string.Empty; this.borderWidth = 1; this.borderColor = "#DDDDDD"; this.animation = new Animation(); this.ignoreHiddenSeries = false; this.style = null; this.className = null; } ///
/// 展示的dom元素区域,一般为ID /// public string renderTo { get; set; } ///
/// 设置或获取图表类型 /// public string type { get; set; } ///
/// 设置或获取图表外部边框,默认为0,不显示边框 /// public int borderWidth { get; set; } ///
/// 设置或获取外部边框颜色 /// public string borderColor { get; set; } ///
/// 设置或获取图表背景色-默认颜色白底 /// public string backgroundColor { get; set; } ///
/// 动画效果,若是想要关闭动画效果请将duration属性设置或获取为0 /// public Animation animation { get; set; } ///
/// 设置或获取图表显示的render所用到的div上的css样式 /// public string className { get; set; } ///
/// 设置或获取样式 /// public string style { get; set; } ///
/// 设置或获取图表高度 /// public int? height { get; set; } ///
/// 设置或获取宽度 /// public int? width { get; set; } ///
/// 设置隐藏Series指标轴是否动态变化 /// public bool ignoreHiddenSeries { get; set; } ///
/// 设置X-Y坐标轴是否翻转 /// public bool? inverted { get; set; } ///
/// 设置图表与div边框底部距离 /// public int? marginBottom { get; set; } ///
/// 设置图表与div边框左边距离 /// public int? marginLeft { get; set; } ///
/// 设置图表与div边框右边距离 /// public int? marginRight { get; set; } ///
/// 设置图表与div边框顶部距离 /// public int? marginTop { get; set; } ///
/// 是否自适应宽度高度 /// public bool reflow { get; set; } } public class Title { public Title() { this.text = string.Empty; } ///
/// 设置图表主标题 /// public string text { get; set; } } ///
/// 图表副标题 /// public class SubTitle { public SubTitle() { this.text = string.Empty; } public string text { get; set; } } ///
/// 图形X轴 /// public class XAxis { public XAxis() { this.categories = new List
(); this.plotLines = new List
(); this.opposite = false; this.reversed = false; this.title = new Title(); } public Title title { get; set; } ///
/// 维度 /// public List
categories { get; set; } ///
/// 趋势线(X轴,可以设置多条) /// public List
plotLines { get; set; } ///
/// 是否bar图形模式下的左右对称 /// public bool opposite { get; set; } ///
/// 获取或者设置是否允许翻转 /// public bool reversed { get; set; } ///
/// X轴中心线 /// public int? linkedTo { get; set; } } ///
/// Y轴 /// public class YAxis { public YAxis() { this.title = new Title(); this.plotLines = new List
(); this.min = null; this.max = null; } public int? min { get; set; } public int? max { get; set; } public Title title { get; set; } public List
plotLines { get; set; } } ///
/// 数据列 /// public class Series { public Series() { this.name = string.Empty; this.allowPointSelect = true; this.size = 180; this.color = null; this.showInLegend = true; this.center = new int[] { 700, 150 }; } public string type { get; set; } public string name { get; set; } public bool allowPointSelect { get; set; } public List
data { get; set; } public int[] center { get; set; } public int? size { get; set; } public string color { get; set; } public bool? showInLegend { get; set; } public int? pointInterval { get; set; } } /// /// 动画类 /// public class Animation { public Animation() { this.duration = 600; } /// /// 设置动画持续时间 /// public int duration { get; set; } /// /// 设置动画效果类似jquery效果中的easeOutBounce /// public string easing { get; set; } } /// /// Tooltip信息属性 /// public class ToolTip { private string _pointFormat = string.Empty; public ToolTip() { this.backgroundColor = "#FFFFFF"; this.borderRadius = 5; this.borderWidth = 2; this.crosshairs = new List
(2); this.crosshairs.Add(false); this.crosshairs.Add(false); this.enabled = true; this.shared = false; this.useHTML = false; this.headerFormat = "
{point.key}
"; this.pointFormat = string.Empty; this.footerFormat = string.Empty; } /// /// 设置或获取Tooltip提示背景默认淡黄色 /// public string backgroundColor { get; set; } /// /// 设置或获取Tooltip边框颜色 /// public string borderColor { get; set; } /// /// 设置或获取Tooltip边框圆角默认为5,为0时为矩形 /// public int borderRadius { get; set; } /// /// 设置或获取Tooltip边框宽度默认为2 /// public int borderWidth { get; set; } /// /// 设置或获取需不需要开启跟踪x,y跟踪条-第一个为x,第二个为y,注意只能输入2个参数 /// public List
crosshairs { get; set; } ///
/// 设置或获取是否启用tooltip /// public bool enabled { get; set; } ///
/// 设置或获取多Series情况下是否共享自己的tooltip消息框 /// public bool shared { get; set; } ///
/// 设置是否使用HTML模式来展示Tooltip框,默认使用SVG格式 /// public bool useHTML { get; set; } ///
/// 设置支持以下几个HTML标签b, strong, i, e, b, span, br 标签头的值:{point.key} /// public string headerFormat { get; set; } ///
/// 设置数据点的格式,颜色:{series.color},名字:{series.name},值:{point.y} /// public string pointFormat { get { if (string.IsNullOrEmpty(this._pointFormat) && this.shared) return "
{series.name}:
{point.y}
"; else if (string.IsNullOrEmpty(this._pointFormat) && !this.shared) return "
{series.name}:
{point.y}"; else return _pointFormat; } set { _pointFormat = value; } } ///
/// 设置数据底部格式,headerFormat,pointFormat,footerFormat三个加起来可以拼接成一个完成html /// public string footerFormat { get; set; } ///
/// 精确到小数点后的位数 /// public int percentageDecimals { get; set; } } ///
/// 版权信息属性 /// public class Credits { public Credits() { this.enabled = false; this.href = string.Empty; this.text = string.Empty; this.position = string.Empty; } ///
/// 设置是否开启版权信息 /// public bool enabled { get; set; } ///
/// 设置版权信息文本链接 /// public string href { get; set; } ///
/// 设置或获取版权信息文本 /// public string text { get; set; } ///
/// 设置版权信息文本 /// public string position { get; set; } } ///
/// 显示Legend标签 /// public class Legend { public Legend() { this.align = "center"; this.verticalAlign = "bottom"; this.backgroundColor = string.Empty; this.borderColor = "#909090"; this.borderRadius = 5; this.enabled = true; this.floating = false; this.layout = new LayoutTypeEnum(); this.navigation = new Navigation(); } public string align { get; set; } public string verticalAlign { get; set; } public string backgroundColor { get; set; } public string borderColor { get; set; } public int borderRadius { get; set; } public bool enabled { get; set; } public bool floating { get; set; } public LayoutTypeEnum layout { get; set; } public Navigation navigation { get; set; } } ///
/// Legend标签是否需要导航条 /// public class Navigation { public Navigation() { this.animation = false; } public bool animation { get; set; } } ///
/// /// public class PlotLines { public PlotLines() { this.color = "#FFEE99"; this.dashStyle = "Solid"; this.width = 2; this.value = 0; } public string color { get; set; } public string dashStyle { get; set; } public double value { get; set; } public int width { get; set; } } ///
/// 具体各个图形操作属性 /// public class PlotOptions { public PlotOptions() { this.enableDataLabels = false; this.enableMouseTracking = true; this.stacking = null; this.showInLegend = false; this.cursor = "pointer"; } public bool enableDataLabels { get; set; } public bool enableMouseTracking { get; set; } public string stacking { get; set; } public bool showInLegend { get; set; } public string cursor { get; set; } } public class Exporting { public Exporting() { this.exporting = true; } public bool exporting { get; set; } } ///
/// 图形类型枚举 /// public enum ChartTypeEnum { bar = 0, line, spline, column, pie, scattar, gauge, area, arearange, areasplinerange, areaspline } ///
/// 布局显示枚举 /// public enum LayoutTypeEnum { horizontal = 0, vertical } public enum StackingTypeEnum { normal = 0, percent }}
最主要的HighChart实体封装类

 

转载于:https://www.cnblogs.com/ceci/p/4223641.html

你可能感兴趣的文章
PHP之省事儿的封装
查看>>
洛谷3812:【模板】线性基——题解
查看>>
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
查看>>
Python文件指针与Python函数
查看>>
ORM系列之Entity FrameWork详解
查看>>
[转] java Class类
查看>>
编码转换
查看>>
MVC报错的坑
查看>>
那些争议最大的编程观点
查看>>
极简科普 1:什么是 VOIP
查看>>
11.10 (下午)开课二个月零六天(ajax验证用户名,ajax调数据库)
查看>>
PXC 避免加入集群时发生SST
查看>>
JS基础语法
查看>>
python 的一些tip 02
查看>>
int转字符串 stringstream
查看>>
pip升级时报错--- No module named 'pip._internal'
查看>>
大白话搞懂什么是同步/异步/阻塞/非阻塞
查看>>
Fiddler抓包工具总结二(转自小坦克)
查看>>
JSP----动态网页开发的基础
查看>>
CentOS 6.5下部署日志服务器 Rsyslog+LogAnalyzer+MySQL
查看>>