首页 > 代码库 > HighChart 体验之旅 （后台传递JSON参数和数据的方法）
HighChart 体验之旅 （后台传递JSON参数和数据的方法）
转自：http://www.cnblogs.com/daviddai/archive/2013/04/12/Highchart.html
官网：http://www.highcharts.com/
中文网：http://www.hcharts.cn/
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><%@ Import Namespace="DavidHighChartDemo.Models" %><asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> HighChart Demo Gallary</asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2> HighChart Demo Gallary</h2> <%=Html.Label("请选择图标：") %><%=Html.DropDownList("ddlChartType", new List<SelectListItem>() { new SelectListItem() { Text = "混合型", Value=http://www.mamicode.com/((int)HighchartTypeEnum.混合型).ToString(), Selected=true }, new SelectListItem() { Text = "饼图型", Value=http://www.mamicode.com/((int)HighchartTypeEnum.饼图型).ToString() }, new SelectListItem() { Text = "柱状图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.柱状图).ToString() }, new SelectListItem() { Text = "多柱状图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.多柱状图).ToString() }, new SelectListItem() { Text = "多流线图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.多流线图).ToString() }, new SelectListItem() { Text = "多横柱图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.多横柱图).ToString() }, new SelectListItem() { Text = "层叠图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.层叠图).ToString() }, new SelectListItem() { Text = "区域图", Value=http://www.mamicode.com/((int)HighchartTypeEnum.区域图).ToString() }, new SelectListItem() { Text = "温度计型", Value=http://www.mamicode.com/((int)HighchartTypeEnum.温度计型).ToString() }, }, null, new { @onchange = "javascript:chartChangeEvent()" })%> <div id="highChartContainer" class="mtop10"> <label id="highChartLabel"></label> <div id="highChartDiv"> </div> <span id="resultInfo" style="margin-left: 20px"></span> </div> <script language="javascript" type="text/javascript"> $(document).ready(function () { drawChart(); }) //初始化图标 var drawChart = function () { $.ajax({ url: "/DavidTest/GetHighChartOptions", type: "post", data: { "type": $("#ddlChartType").find("option:selected").val() }, dataType: "json", success: function (data) { $("#highChartLabel").text(data.label); draw(data.value); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); } //change事件 var chartChangeEvent = function () { drawChart(); } //绘图方法 var draw = function (chartOptions) { var chart = new Highcharts.Chart({ chart: chartOptions.chart, title: chartOptions.title, subtitle: chartOptions.subtitle, credits: chartOptions.credits, xAxis: chartOptions.xAxis, yAxis: chartOptions.yAxis, tooltip: chartOptions.tooltip, plotOptions: { pie: { cursor: chartOptions.plotOptions.cursor }, spline: { stickyTracking: true }, series: { stacking: chartOptions.plotOptions.stacking, point: { events: { mouseOver: function () { $("#resultInfo").html("Category值：" + this.category + " X值：" + this.x + " Y值：" + this.y); }, mouseOut: function () { $("#resultInfo").empty(); } } }, marker: { states: { select: { fillColor: "red", lineWidth: 0 } } } }, allowPointSelect: true }, series: chartOptions.series, exporting: chartOptions.exporting }); } </script></asp:Content>
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 = http://www.mamicode.com/chart, label = type.ToString() }, JsonRequestBehavior.AllowGet); } }}
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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, series = new List<Series>() { new Series(){ name = "网易", data = new List<object>() { 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 = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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}: <b>{point.percentage}%</b><br/>{series.name}:{point.y}", percentageDecimals = 2 }, series = new List<Series>() { new Series(){ name="地域", data = new List<object>() { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.column.ToString(), color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false }, shared = true }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, plotOptions = new PlotOptions() { stacking = StackingTypeEnum.normal.ToString() }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>() { new XAxis(){ categories = new List<string>() { "一月", "二月", "三月", "四月", "五月" }, reversed = false, opposite = false } }, yAxis = new YAxis() { title = new Title() { text = "独立访问数" } }, tooltip = new ToolTip() { crosshairs = new List<bool>() { true, false } }, series = new List<Series>() { new Series { name = "新浪", data = http://www.mamicode.com/new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" }, new Series { name = "腾讯", data = http://www.mamicode.com/new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" }, new Series { name = "网易", data = http://www.mamicode.com/new List<object> { 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<XAxis>(){ 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 = "<b>{series.name}</b><br/>", pointFormat = "{point.x} km: {point.y}°C", percentageDecimals = 2 }, series = new List<Series>() { new Series(){ name="Temperature", size=null, showInLegend=false, data = new List<object>() { 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; } }}
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace DavidHighChartDemo.Models{ /// <summary> /// HighChart图形类，其中所有基本属性都需要与官网API名字相同，否则可能引起JS错误 /// </summary> public class HighChartOptions { public HighChartOptions() { this.chart = new Chart(); this.title = new Title(); this.subtitle = new SubTitle(); this.xAxis = new List<XAxis>(); this.yAxis = new YAxis(); this.series = new List<Series>(); 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> xAxis { get; set; } public YAxis yAxis { get; set; } public List<Series> series { get; set; } public ToolTip tooltip { get; set; } public PlotOptions plotOptions { get; set; } public Credits credits { get; set; } public Exporting exporting { get; set; } } /// <summary> /// 基础HighChart图形类 /// </summary> 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; } /// <summary> /// 展示的dom元素区域，一般为ID /// </summary> public string renderTo { get; set; } /// <summary> /// 设置或获取图表类型 /// </summary> public string type { get; set; } /// <summary> /// 设置或获取图表外部边框，默认为0，不显示边框 /// </summary> public int borderWidth { get; set; } /// <summary> /// 设置或获取外部边框颜色 /// </summary> public string borderColor { get; set; } /// <summary> /// 设置或获取图表背景色-默认颜色白底 /// </summary> public string backgroundColor { get; set; } /// <summary> /// 动画效果，若是想要关闭动画效果请将duration属性设置或获取为0 /// </summary> public Animation animation { get; set; } /// <summary> /// 设置或获取图表显示的render所用到的div上的css样式 /// </summary> public string className { get; set; } /// <summary> /// 设置或获取样式 /// </summary> public string style { get; set; } /// <summary> /// 设置或获取图表高度 /// </summary> public int? height { get; set; } /// <summary> /// 设置或获取宽度 /// </summary> public int? width { get; set; } /// <summary> /// 设置隐藏Series指标轴是否动态变化 /// </summary> public bool ignoreHiddenSeries { get; set; } /// <summary> /// 设置X-Y坐标轴是否翻转 /// </summary> public bool? inverted { get; set; } /// <summary> /// 设置图表与div边框底部距离 /// </summary> public int? marginBottom { get; set; } /// <summary> /// 设置图表与div边框左边距离 /// </summary> public int? marginLeft { get; set; } /// <summary> /// 设置图表与div边框右边距离 /// </summary> public int? marginRight { get; set; } /// <summary> /// 设置图表与div边框顶部距离 /// </summary> public int? marginTop { get; set; } /// <summary> /// 是否自适应宽度高度 /// </summary> public bool reflow { get; set; } } public class Title { public Title() { this.text = string.Empty; } /// <summary> /// 设置图表主标题 /// </summary> public string text { get; set; } } /// <summary> /// 图表副标题 /// </summary> public class SubTitle { public SubTitle() { this.text = string.Empty; } public string text { get; set; } } /// <summary> /// 图形X轴 /// </summary> public class XAxis { public XAxis() { this.categories = new List<string>(); this.plotLines = new List<PlotLines>(); this.opposite = false; this.reversed = false; this.title = new Title(); } public Title title { get; set; } /// <summary> /// 维度 /// </summary> public List<string> categories { get; set; } /// <summary> /// 趋势线（X轴，可以设置多条） /// </summary> public List<PlotLines> plotLines { get; set; } /// <summary> /// 是否bar图形模式下的左右对称 /// </summary> public bool opposite { get; set; } /// <summary> /// 获取或者设置是否允许翻转 /// </summary> public bool reversed { get; set; } /// <summary> /// X轴中心线 /// </summary> public int? linkedTo { get; set; } } /// <summary> /// Y轴 /// </summary> public class YAxis { public YAxis() { this.title = new Title(); this.plotLines = new List<PlotLines>(); this.min = null; this.max = null; } public int? min { get; set; } public int? max { get; set; } public Title title { get; set; } public List<PlotLines> plotLines { get; set; } } /// <summary> /// 数据列 /// </summary> 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<object> 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; } } /// <summary> /// 动画类 /// </summary> public class Animation { public Animation() { this.duration = 600; } /// <summary> /// 设置动画持续时间 /// </summary> public int duration { get; set; } /// <summary> /// 设置动画效果类似jquery效果中的easeOutBounce /// </summary> public string easing { get; set; } } /// <summary> /// Tooltip信息属性 /// </summary> public class ToolTip { private string _pointFormat = string.Empty; public ToolTip() { this.backgroundColor = "#FFFFFF"; this.borderRadius = 5; this.borderWidth = 2; this.crosshairs = new List<bool>(2); this.crosshairs.Add(false); this.crosshairs.Add(false); this.enabled = true; this.shared = false; this.useHTML = false; this.headerFormat = "<small>{point.key}<small><br/>"; this.pointFormat = string.Empty; this.footerFormat = string.Empty; } /// <summary> /// 设置或获取Tooltip提示背景默认淡黄色 /// </summary> public string backgroundColor { get; set; } /// <summary> /// 设置或获取Tooltip边框颜色 /// </summary> public string borderColor { get; set; } /// <summary> /// 设置或获取Tooltip边框圆角默认为5，为0时为矩形 /// </summary> public int borderRadius { get; set; } /// <summary> /// 设置或获取Tooltip边框宽度默认为2 /// </summary> public int borderWidth { get; set; } /// <summary> /// 设置或获取需不需要开启跟踪x,y跟踪条-第一个为x，第二个为y,注意只能输入2个参数 /// </summary> public List<bool> crosshairs { get; set; } /// <summary> /// 设置或获取是否启用tooltip /// </summary> public bool enabled { get; set; } /// <summary> /// 设置或获取多Series情况下是否共享自己的tooltip消息框 /// </summary> public bool shared { get; set; } /// <summary> /// 设置是否使用HTML模式来展示Tooltip框，默认使用SVG格式 /// </summary> public bool useHTML { get; set; } /// <summary> /// 设置支持以下几个HTML标签b, strong, i, e, b, span, br 标签头的值：{point.key} /// </summary> public string headerFormat { get; set; } /// <summary> /// 设置数据点的格式，颜色：{series.color}，名字：{series.name}，值：{point.y} /// </summary> public string pointFormat { get { if (string.IsNullOrEmpty(this._pointFormat) && this.shared) return "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b><br/>"; else if (string.IsNullOrEmpty(this._pointFormat) && !this.shared) return "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b>"; else return _pointFormat; } set { _pointFormat = value; } } /// <summary> /// 设置数据底部格式，headerFormat，pointFormat，footerFormat三个加起来可以拼接成一个完成html /// </summary> public string footerFormat { get; set; } /// <summary> /// 精确到小数点后的位数 /// </summary> public int percentageDecimals { get; set; } } /// <summary> /// 版权信息属性 /// </summary> public class Credits { public Credits() { this.enabled = false; this.href = http://www.mamicode.com/string.Empty; this.text = string.Empty; this.position = string.Empty; } /// <summary> /// 设置是否开启版权信息 /// </summary> public bool enabled { get; set; } /// <summary> /// 设置版权信息文本链接 /// </summary> public string href { get; set; } /// <summary> /// 设置或获取版权信息文本 /// </summary> public string text { get; set; } /// <summary> /// 设置版权信息文本 /// </summary> public string position { get; set; } } /// <summary> /// 显示Legend标签 /// </summary> 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; } } /// <summary> /// Legend标签是否需要导航条 /// </summary> public class Navigation { public Navigation() { this.animation = false; } public bool animation { get; set; } } /// <summary> /// /// </summary> public class PlotLines { public PlotLines() { this.color = "#FFEE99"; this.dashStyle = "Solid"; this.width = 2; this.value = http://www.mamicode.com/0; } public string color { get; set; } public string dashStyle { get; set; } public double value { get; set; } public int width { get; set; } } /// <summary> /// 具体各个图形操作属性 /// </summary> 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; } } /// <summary> /// 图形类型枚举 /// </summary> public enum ChartTypeEnum { bar = 0, line, spline, column, pie, scattar, gauge, area, arearange, areasplinerange, areaspline } /// <summary> /// 布局显示枚举 /// </summary> public enum LayoutTypeEnum { horizontal = 0, vertical } public enum StackingTypeEnum { normal = 0, percent }}
HighChart 体验之旅 （后台传递JSON参数和数据的方法）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。