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[] = "2013/1";

         dr[] = "";

         dt.Rows.Add(dr);

         DataRow dr1 = dt.NewRow();

         dr1[] = "2013/2";

         dr1[] = "";

         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 提交。

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

巴特西

HighchartsNET快速图表控件-开源

最新文章

热门文章