Chart控件添加图标标注

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

初始化的Chart控件样式:

            <asp:Chart ID="Chart1" runat="server" BackColor="211, 223, 240" Width="1000px" Height="300px"
                 BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom"
                 BorderWidth="2px" BorderColor="#1A3B69" EnableViewState="True" ViewStateContent="All">
                 <Legends>
                     <asp:Legend LegendStyle="Row" IsTextAutoFit="false" Docking="Top" IsDockedInsideChartArea="false"
                         Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"
                         Alignment="Far">
                         <Position Y="5" Height="7.127659" Width="38.19123" X="55"></Position>
                     </asp:Legend>
                 </Legends>
                 <BorderSkin SkinStyle="Emboss"></BorderSkin>
                 <Series>
                     <asp:Series Name="Series1" ChartArea="ChartArea1" YValuesPerPoint="4" XValueType="DateTime"
                         IsVisibleInLegend="false" ChartType="Line" BorderColor="180, 26, 59, 105">
                     </asp:Series>
                 </Series>
                 <ChartAreas>
                     <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
                         BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
                         BackGradientStyle="TopBottom">
                         <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
                             WallWidth="0" IsClustered="False"></Area3DStyle>
                         <AxisY LineColor="64, 64, 64, 64" IsLabelAutoFit="False" IsStartedFromZero="False">
                             <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                             <MajorGrid LineColor="64, 64, 64, 64" />
                         </AxisY>
                         <AxisX LineColor="64, 64, 64, 64" IsLabelAutoFit="true">
                             <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" IsEndLabelVisible="False" Format="yyyy-MM-dd HH:mm"
                                 Interval="2" />
                             <MajorGrid LineColor="64, 64, 64, 64" />
                         </AxisX>
                     </asp:ChartArea>
                 </ChartAreas>
                 <Titles>
                     <asp:Title BackImageAlignment="Top" Font="微软雅黑, 12pt" Name="chartTitle" Text="油料曲线图">
                     </asp:Title>
                 </Titles>
             </asp: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;
最后结果如下图