微软的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;