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 里添加绑定代码即可

 1         //上面部分只是模拟数据
 2         DataTable dt = new DataTable();
 3         dt.Columns.Add("a");
 4         dt.Columns.Add("b");
 5         DataRow dr = dt.NewRow();
 6         dr[0] = "2013/1";
 7         dr[1] = "50";
 8         dt.Rows.Add(dr);
 9         DataRow dr1 = dt.NewRow();
10         dr1[0] = "2013/2";
11         dr1[1] = "150";
12         dt.Rows.Add(dr1);
13 
14         //图表只需这部分代码
15         highcharts1.Type = HighchartsNET.ChartType.Column;
16         highcharts1.DataKey = "a";
17         highcharts1.DataValue = "b";
18         highcharts1.YAxis = "降雨量(mm)";//Y轴的值;
19         highcharts1.Tooltip = "valueSuffix: 'mm'";
20         highcharts1.DataName = "武汉";
21         highcharts1.Legend = true;//是否显示标示，默认为false
22         highcharts1.DataSource = dt;
23         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 提交。

 

如果你觉得本文对你有帮助，请点击“推荐”，谢谢。