可变半径饼图(卡片四)
饼图可以使用形状里的Sector 拼到一起实现,本例子也是这么做的。不过由于之前的例子都是直接在窗口设计里设置的,本例子尝试全部使用代码生成。
温馨提醒:
1、在本帮助编写的时候,Foxtable最新版已经改进了旧的图表功能,可以方便的设置样式去掉边框和背景,并且可以嵌入仪表控件,支持自动布局。所以如果嫌麻烦的话,可以直接嵌入图表里的饼图到卡片四的位置
,会方便很多,参考:饼形图 图表事件
2、例如卡片六中的图表就是直接使用Chart控件实现的,所以一般用户建议忽略本节内容。
在使用代码之前,我们必须要先知道要添加什么形状,设置形状的什么属性才能达到效果,所以可以先在仪表里添加形状做出效果后,把属性记录下来然后用到代码里。
新建一个窗口,添加一个空白的径向仪表,然后添加2个Sector,设置好属性看效果,如图:
第一个Sector属性设置为:
属性 |
值 |
说明 |
布局-》CenterRadius |
0 | 不需要设置逻辑半径 |
布局-》InnerRadius |
10 |
中心点半径10% |
布局-》OuterRadius |
80 |
外半径80% |
属性变更-》Border-》Color |
Transparent |
不显示边框,根据需要设置为其它颜色 |
属性变更-》Filling-》Color |
255, 192, 128 |
填充颜色,根据自己需要设置其它颜色 |
第二个Sector属性设置为:
属性 |
值 |
说明 |
布局-》CenterRadius |
0 | 不需要设置逻辑半径 |
布局-》InnerRadius |
10 |
中心点半径10% |
布局-》StartAngle |
45 |
开始角度,一般第2个图的StartAngle=第1个图StartAngle +
第1个图SweepAngle |
属性变更-》Border-》Color |
Transparent |
不显示边框,根据需要设置为其它颜色 |
属性变更-》Filling-》Color |
0, 192, 0 |
填充颜色,根据自己需要设置其它颜色 |
几个比较关键的属性是:
CenterRadius :一般不需要设置,会导致整个Sector缩放影响整体效果。
InnerRadius
:中心点半径,负值中心点会显示为实心,正值中心点会显示为空心。这里一般使用正值。
OuterRadius
:外半径,通过给不同Sector设置不同的外半径来实现整体的可变半径效果。
StartAngle
:开始角度,让不同Sector错开显示。
SweepAngle :影响扇形大小的角度。一般按按一个饼图的所有项目的比例计算
那么代码里基本上就是使用上面的属性来生成图形。完整代码:
-
-
Dim lg As LinearGauge = gg.Gauges(5)
-
Dim rg As RadialGauge = gg.Gauges(9)
-
lg.CoverShapes.Clear
-
rg.CoverShapes.Clear
-
-
Dim drs As List(Of DataRow) = DataTables("产业分布").Select("", "数量")
-
Dim sum As Integer
-
Dim dr As DataRow
-
For Each dr In drs
-
sum += dr("数量")
-
Next
-
-
Dim startAngle As Double = 0
-
Dim minRadius As Integer = 40
-
Dim sweepAngle As Double
-
-
Dim grt As GaugeRectangle
-
Dim gct As GaugeCaption
-
Dim gs As GaugeSector
-
Dim clrs As GaugeColorMap = rg.ColorMaps(0)
-
-
For i As Integer = 0 To drs.Count - 1
-
dr = drs(i)
-
Dim cl As Color = clrs.ValueColors(i).Color
-
gct = New GaugeCaption
-
gct.Text = dr("名称")
-
gct.Font = New Font("微软雅黑", 7.5F)
-
gct.FontSize = 3
-
gct.Color = Color.White
-
gct.Viewport.Height = 10
-
gct.Viewport.Width = 70
-
gct.Viewport.MarginX = 10
-
gct.Viewport.x = -1
-
gct.Viewport.y = 42 + i * 20
-
lg.CoverShapes.Add(gct)
-
-
grt = New GaugeRectangle
-
grt.Viewport.MarginX = 90
-
grt.Viewport.Height = 10
-
grt.Viewport.Width = 10
-
grt.Viewport.x = -1
-
grt.Viewport.y = 40 + i * 20
-
grt.Border.Color = cl
-
grt.Filling.Color = cl
-
grt.Name = "产业分布_" & dr("名称") & "_d"
-
lg.CoverShapes.Add(grt)
-
-
gs = New GaugeSector
-
gs.CenterRadius = 0
-
gs.InnerRadius = 10
-
gs.OuterRadius = minRadius + 10 * i
-
gs.StartAngle = startAngle
-
sweepAngle = (dr("数量") / sum) * 360
-
gs.SweepAngle = sweepAngle
-
startAngle = startAngle + sweepAngle
-
gs.Border.Color = Color.Transparent
-
gs.Filling.Color = cl
-
gs.Name = "产业分布_" & dr("名称")
-
rg.CoverShapes.Add(gs)
-
Next