HighchartsNET快速圖表控件-開源

前言：

HighchartsNET快速圖表控件，基於Highcharts的asp.net web控件。只需幾行代碼你就能快速生成一個圖表。

從此不再擔心圖表復雜。簡單幾行代碼就可以搞定，節省大量工作時間。

內置Highcharts ,但僅限個人學習使用，如需商業，請遵守Highcharts Licensing。

 

控件特色：

支持DataBind() 與微軟其他數據控件一樣直接DataBind() 數據源支持DataTable DataSet。

無需添加引用，內置Highcharts jQuery。 

 

Github：https://github.com/linezero/HighchartsNET

 

下面我來介紹一下使用方法：

 

使用方法： 

首先將HighchartsNET.dll 添加到項目引用。

 

在頁面上注冊HighchartsNET

<%@ Register TagPrefix="Zero" Namespace="HighchartsNET" Assembly="HighchartsNET" %>

 

然后在頁面上添加一個HighchartsNET控件

 

<Zero:HighCharts runat="server" ID="highcharts1" Title="柱狀圖"/>

最后在Page_Load 里添加綁定代碼即可

        //上面部分只是模擬數據
        DataTable dt = new DataTable();
        dt.Columns.Add("a");
        dt.Columns.Add("b");
        DataRow dr = dt.NewRow();
        dr[0] = "2013/1";
        dr[1] = "50";
        dt.Rows.Add(dr);
        DataRow dr1 = dt.NewRow();
        dr1[0] = "2013/2";
        dr1[1] = "150";
        dt.Rows.Add(dr1);

        //圖表只需這部分代碼
        highcharts1.Type = HighchartsNET.ChartType.Column;
        highcharts1.DataKey = "a";
        highcharts1.DataValue = "b";
        highcharts1.YAxis = "降雨量(mm)";//Y軸的值;
        highcharts1.Tooltip = "valueSuffix: 'mm'";
        highcharts1.DataName = "武漢";
        highcharts1.Legend = true;//是否顯示標示，默認為false
        highcharts1.DataSource = dt;
        highcharts1.DataBind();

 最終效果圖如下：

 

 

非常簡單即可生成你所需要的圖表。已在實際項目中實踐，感覺非常方便。

 

屬性說明：

        /// <summary>
        /// 圖表標題
        /// </summary>
        [Description("圖表標題")]
        public string Title { get; set; }
        /// <summary>
        /// 圖表類型
        /// </summary>
        public ChartType Type { get; set; }
        /// <summary>
        /// 圖表2級標題
        /// </summary>
        public string SubTitle { get; set; }

        /// <summary>
        /// 數據對象
        /// </summary>
        public ChartsSeries Series { get; set; }

        /// <summary>
        /// 一些附加選項
        /// </summary>
        public string PlotOptions { get; set; }
        /// <summary>
        /// X軸選項
        /// </summary>
        public List<object> XAxis { get; set; }
        /// <summary>
        /// Y軸選項 默認可以只填名稱
        /// </summary>
        public string YAxis { get; set; }

        /// <summary>
        /// 提示格式
        /// </summary>
        public string Tooltip { get; set; }
        /// <summary>
        /// 圖表層id（容器）
        /// </summary>
        public string DivId { get; set; }

        /// <summary>
        /// 圖標下方標識是否顯示 默認不顯示
        /// </summary>
        public bool Legend { get; set; }

        /// <summary>
        /// 高級功能，多個數據集，多條圖表，餅圖不需要。
        /// </summary>
        public List<ChartsSeries> SeriesList { get; set; }

        public override Unit Width
        {
            get
            {
                return base.Width;
            }
            set
            {
                base.Width = value;
            }
        }

        public override Unit Height
        {
            get
            {                
                return base.Height;
            }
            set
            {
                base.Height = value;
            }
        }

        private bool noscript = true;
        /// <summary>
        /// 是否自動引用腳本，默認為true 設為false即需要手動添加js引用
        /// </summary>
        public bool NoScript 
        {
            get { return noscript; }
            set { noscript = value; }
        }

        public string DataKey { get; set; }
        public string DataValue { get; set; }
        public object DataSource { get; set; }
        public object DataName { get; set; }

 

更多詳細的例子，請參看：https://github.com/linezero/HighchartsNET

 

感悟：

這個是在去年的這個時候折騰的，今天公布出來，只是為了讓大家更方便的去實現所需要的圖表，節省代碼時間，遠離加班。

 

如果你有什么建議，或者bug 請到 https://github.com/linezero/HighchartsNET/issues 提交。

 

如果你覺得本文對你有幫助，請點擊“推薦”，謝謝。