Chart控件添加图标标注

微软的Chart控件无论是在客户端还是web端都使用很广泛,此处自己记录一下前端时间的使用;

初始化的Chart控件样式:

后台代码控制添加图标:

            //加载警告图片到报表中;
             LegendItem legendItem = new LegendItem();
             legendItem.Name = "警告";
             legendItem.ImageStyle = LegendImageStyle.Marker;
             legendItem.MarkerImageTransparentColor = System.Drawing.Color.White;
             legendItem.MarkerImage = "WarningLegend.bmp";
             Chart1.Legends[0].CustomItems.Add(legendItem);
 
             legendItem = new LegendItem();
             legendItem.Name = "异常";
             legendItem.ImageStyle = LegendImageStyle.Marker;
             legendItem.MarkerImageTransparentColor = System.Drawing.Color.White;
             legendItem.MarkerImage = "ExceptionLegend.bmp";
             Chart1.Legends[0].CustomItems.Add(legendItem);

给Chart绑定数据:

	//分别定义图表的第一个加载点的X轴和Y轴数值;
             Chart1.Series["Series1"].Points.AddXY(oilList[j].OilTime, oilList[j].OilValue);

给Chart绑定图标:

其中oilList是数据源,

#VALX{d}是显示日期格式:2012-12-20

#VALX{T}使显示时间格式:10:00:00

还有其他一些格式,如#VALX{D}等,关于Chart官方资料中有查;

//异常图标
             Chart1.Series["Series1"].Points[j].MarkerImage = "ExceptionMarker.bmp";
             Chart1.Series["Series1"].Points[j].MarkerImageTransparentColor = System.Drawing.Color.White;
             Chart1.Series["Series1"].Points[j].ToolTip = "#VALX{d} #VALX{T}\n油料异常,当前油料百分比(%)为:" + oilList[j].OilValue;

//警告图标
             Chart1.Series["Series1"].Points[j].MarkerImage = "WarningMarker.bmp";
             Chart1.Series["Series1"].Points[j].MarkerImageTransparentColor = System.Drawing.Color.White;
             Chart1.Series["Series1"].Points[j].ToolTip = "#VALX{d} #VALX{T}\n油料异常,当前油料百分比(%)为:" + oilList[j].OilValue;

最后结果如下图