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

最近由于项目繁忙都没时间整理下最近所看的东西~前段时间由于项目需要，需要把曾经使用FusionChart Flash报表插件换成纯JS的报表插件（因为客户这还有不给装Flash的板子）~所以没办法喽只能重新找个纯JS的插件，功夫不负有心人啊~终于在网上找到一款纯JS的插件，Highcharts图标控件~效果很强大，使用很方便~支持很多不同的功能~自带导出~

闲话不多说先贴上，官网地址：http://www.highcharts.com/

不过官网上的很多图形示例都是直接在前台传递参数和数据，由于项目中需要由后台传递一系列的参数和数据，网上搜寻了很多方法，最终还是决定自己动手丰衣足食~

其中最主要注意的地方是封装Highchart实体类的时候，所有参数必须和API中相同（包括大小写）还有参数结构否则序列化成JSON前台接受时候不识别~

下满贴下主要代码，希望对有需要的朋友可以用到~

<%@ 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);
        }
    }
}

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 = "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;
        }
    }
}

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
    }
}

 注：本文章中涉及技术共享版权归本人所有，如发现未经允许用作非法用作商业用途，将进行法律追究