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

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

 注：本文章中涉及技術共享版權歸本人所有，如發現未經允許用作非法用作商業用途，將進行法律追究