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();

最终效果图如下:

HighchartsNET快速图表控件-开源

非常简单即可生成你所需要的图表。已在实际项目中实践,感觉非常方便。

属性说明:

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

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

上一篇:HTML5优秀图表控件


下一篇:TextView设置不同字段不同点击事件