Essential Studio for ASP.NET如何创建圆型仪表

作者:控件中国网   出处:控件中国网   2015-11-12 15:41:45   阅读:4

Essential Studio for ASP.NET是一款用于Web下的多功能界面套包,包含了上100种常用的界面控件,其中一款控件就是CircularGauge(圆形仪表),通过该控件不仅可以创建仪表还可以进行多种自定义,样式设置等,这篇文章就主要介绍怎么在asp.net下创建绚丽的仪表图表,下面就创建仪表的详细步奏作介绍:
getting-started_img1.png
1.首先创建一个Asp.net项目,添加必须的DLL和脚本,并添加下面的代码到Web设计页面的代码里
 <ej:CircularGauge runat="server" ID="CircularGauge1">
 </ej:CircularGauge>
2.设置仪表的宽度和高度
<ej:CircularGauge runat="server" ID="CircularGauge1" Height="500" Width="500">
</ej:CircularGauge>
3.设置仪表的背景颜色
<ej:CircularGauge runat="server" ID="CircularGauge1" Height="500" Width="500" BackgroundColor="#3D3F3D" ReadOnly="false">
</ej:CircularGauge>
4.设置仪表的比例值,刻度等
<ej:CircularGauge runat="server" ID="CircularGauge1" Height="500" Width="500" BackgroundColor="#3D3F3D" ReadOnly="false">
<Scales>
<ej:CircularScales ShowRanges="true" ShowIndicators="true" Maximum="200" MajorIntervalValue="20" MinorIntervalValue="5">
<PointerCap Radius="15" BackgroundColor="#797C79"
BorderColor="#797C79" BorderWidth="0">
</PointerCap>
</ej:CircularScales>
</Scales>
</ej:CircularGauge>
5.设置仪表的刻度标签颜色等
<LabelCollection>
<ej:CircularLabels Color="#FFFFFF"></ej:CircularLabels>
</LabelCollection>
6.设置仪表指针的值
<PointerCollection>
<ej:Pointers Value="140" DistanceFromScale="60"
ShowBackNeedle="false" Length="20" Type="Marker"
MarkerType="Triangle" Width="10" BackgroundColor="#FF940A">
<Border Color="#FF940A"/>
</ej:Pointers>
<ej:Pointers Value="110" ShowBackNeedle="false" Length="150"
NeedleType="Rectangle" Width="2" BackgroundColor="#05AFFF">
<Border Color="#05AFFF"/>
</ej:Pointers>
<ej:Pointers Value="67" ShowBackNeedle="false" Length="100"
Width="15" BackgroundColor="#FC5D07">
<Border Color="#FC5D07"/>
</ej:Pointers>
7.设置仪表刻度样式
<TickCollection>
<ej:CircularTicks Type="Major" DistanceFromScale="70"
Height="20" Width="3" Color="#FFFFFF"/>
<ej:CircularTicks Type="Minor" DistanceFromScale="70"
Height="12" Width="1" Color="#FFFFFF" />
</TickCollection>
getting-started_img8.png
8.设置仪表范围值,也就是采用不同的颜色表示不同范围的值
<RangeCollection>
<ej:CircularRanges DistanceFromScale="30" StartValue="0"
EndValue="70"
BackgroundColor="#5DF243">
<Border Color="#FFFFFF"/>
</ej:CircularRanges>
<ej:CircularRanges DistanceFromScale="30" StartValue="70"
EndValue="140"
BackgroundColor="#F6FF0A">
<Border Color="#FFFFFF"/>
</ej:CircularRanges>
<ej:CircularRanges DistanceFromScale="30" StartValue="140"
EndValue="200"
BackgroundColor="#FF1807">
<Border Color="#FFFFFF"/>
</ej:CircularRanges>
</RangeCollection>
getting-started_img9.png
9.设置详细的指示器:
<IndicatorCollection>
<ej:CircularIndicators Type="Circle"
Height="10" Width="10">
<Position X="210" Y="300"/>
<StateRangeCollection>
<ej:CircularStateRanges StartValue="0" EndValue="70"
BackgroundColor="#5DF243" BorderColor="#5DF243">
</ej:CircularStateRanges>
<ej:CircularStateRanges StartValue="70" EndValue="200"
BackgroundColor="#145608" BorderColor="#145608">
</ej:CircularStateRanges>
</StateRangeCollection>
</ej:CircularIndicators>
<ej:CircularIndicators Type="Circle"
Height="10" Width="10">
<Position X="255" Y="200"/>
<StateRangeCollection>
<ej:CircularStateRanges StartValue="0" EndValue="70"
BackgroundColor="#969B0C" BorderColor="#969B0C">
</ej:CircularStateRanges>
<ej:CircularStateRanges StartValue="70" EndValue="140"
BackgroundColor="#F6FF0A" BorderColor="#F6FF0A">
</ej:CircularStateRanges>
<ej:CircularStateRanges StartValue="140" EndValue="200"
BackgroundColor="#969B0C" BorderColor="#969B0C">
</ej:CircularStateRanges>
</StateRangeCollection>
</ej:CircularIndicators>
<ej:CircularIndicators Type="Circle"
Height="10" Width="10">
<Position X="300" Y="300"/>
<StateRangeCollection>
<ej:CircularStateRanges StartValue="140" EndValue="200"
BackgroundColor="#FF1807" BorderColor="#FF1807">
</ej:CircularStateRanges>
<ej:CircularStateRanges StartValue="0" EndValue="140"
BackgroundColor="#890F06" BorderColor="#890F06">
</ej:CircularStateRanges>
</StateRangeCollection>
</ej:CircularIndicators>
</IndicatorCollection>
getting-started_img10.png
10.设置自定义标签
<CustomLabelCollection>
<ej:CircularCustomLabel Color="#5DF243" Value="Safe">
<Position X="200" Y="280"/>
<Font FontFamily="Arial" FontStyle="Bold"
Size="12px"></Font>
</ej:CircularCustomLabel>
<ej:CircularCustomLabel Color="#F6FF0A" Value="Caution">
<Position X="253" Y="212"/>
<Font FontFamily="Arial" FontStyle="Bold"
Size="12px"></Font>
</ej:CircularCustomLabel>
<ej:CircularCustomLabel Color="#FF1807" Value="Danger">
<Position X="290" Y="280"/>
<Font FontFamily="Arial" FontStyle="Bold"
Size="12px"></Font>
</ej:CircularCustomLabel>
</CustomLabelCollection>
getting-started_img11.png
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat