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=((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()" })%>
    <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 = 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<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 = new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.column.ToString(),allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.column.ToString(), color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, type= ChartTypeEnum.spline.ToString(),allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, type=ChartTypeEnum.spline.ToString(), color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" },
                    new Series { name = "网易", data = 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 = new List<object> { 11, 13, 5, 6, 4 }, allowPointSelect=false, color="#CC6600" },
                    new Series { name = "腾讯", data = new List<object> { 12, 8, 9, 2, 6 }, color="#33CCFF" },
                    new Series { name = "网易", data = 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;
        }
    }
}

Service

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 = 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 = 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实体封装类

时间： 2024-10-18 03:56:02

HighChart 体验之旅 （后台传递JSON参数和数据的方法）的相关文章

JSON三种数据解析方法（转）

原 JSON三种数据解析方法 2018年01月15日 13:05:01 zhoujiang2012 阅读数:7896 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/oman001/article/details/79063278 引言 JSON数据现在是我们开发中用的最多的,百分之八十的数据都是通过JSON方式进行传输,那么想要学好JSON解析就要了解什么是JSON数据,怎么快速解析它从而提升开发效率. 什么是JSON数据? 下面这里有一段JS

kettle(PDI)解析xml、json等格式数据的方法

最近由于工作业务需要,一直在研究pdi工具中解析xml.json等格式数据的方法,解析xml和json都较简单. 解析xml的时候,只需要选择相应的文件(不一定要是xml文件,txt的也行,只要是数据是xml格式就可以),然后选择循环读取路径,设置好标签对名称即可: 一:选择文件,如果xml数据是上一过程输入的,不用选择文件: 二:选择循环解析xml的节点,你所选择的节点应该是所以数据的根节点: 三:设置好对应的节点名称和数据名称: 保存配置后,运行即可. 对应的解析json也类似xml的解析:

WebApi传递JSON参数

开发过程中经常进行JSON的传递,在WebApi中传递JSON字串时,会发现服务器端接收到不参数值,看下面代码 服务端: public void Post([FromBody]string value) { LoggerHelper.Info("Post:{0}", value); } 客户端: HttpClient client = new HttpClient(); client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQ

c# HttpWebRequest 模拟HTTP post 传递JSON参数

//HTTP post   JSON 参数        private string HttpPost(string Url, Object ticket)        {            DataContractJsonSerializer serializer = new DataContractJsonSerializer(ticket.GetType());            MemoryStream stream = new MemoryStream();        

JS向后台传递json数组对象

var Obj = []; //一下代码可以循环插入 var returnObj = new Object();//创建一个对象 returnObj.id = "123": returnObj.money = 456""; Obj.push(returnObj); JS中将Obj对象进行序列化操作 Obj = JSON.stringify(Obj); //发送ajax请求$.ajax({ type : "POST", url : top.base

ajax直接向后台传递json list结构的数据

1 $.ajax({ 2 url: CONTEXTPATH + ..., 3 data: JSON.stringify(data), 4 dataType: 'json', 5 contentType: 'application/json; charset=UTF-8', 6 type: 'post' 7 }).done(function (res) { 8 // 成功操作14 }).fail(function () { 15 // 失败操作 16 }); 传递数据data需要使用json字符串

c#前台向后台传Json类型的数据

JSON.stringify(postdata) var ThesisData = ko.toJS(viewModel.loadData()); ; //后台 var obj = JsonConvert.DeserializeObject(userinfos); JArray ja = new JArray(); if (obj is JArray) { ja = JsonConvert.DeserializeObject<JArray>(userinfos); } else { ja = J

silverlight调用WebService传递json接收绑定数据

1.接收数据: WebService通过接口接收数据.类型为object 2.类型转换: 通过json转换方法将object转换为json格式数据 3.调用WebService方法: silverlight调用WebService方法,接收json数据 4.转换数据: silverlight引用Newtonsoft.Json.Silverlight.dll文件,调用JsonConvert.DeserializeObject<T>(json)方法进行格式转换就可以利用数据 比如:List<

js操作json添加元素和数据的方法

function addServerUrlToJson() { var json_tem = [{"name":"a","value":1}]; var arr = { "name" : "aaa", "value" : "bbb" }; json_tem.push(arr); document.write(JSON.stringify(json_tem)); } 结