Chart控件添加图标标注

来源:互联网 发布:centos 6.6 安装 编辑:程序博客网 时间:2024/06/06 00:09

微软的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;
最后结果如下图