可变半径饼图(卡片四)

饼图可以使用形状里的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  :影响扇形大小的角度。一般按按一个饼图的所有项目的比例计算

那么代码里基本上就是使用上面的属性来生成图形。完整代码:

  1. '''设置饼图  
  2. Dim lg As LinearGauge = gg.Gauges(5) '第6个仪表,卡片四  
  3. Dim rg As RadialGauge = gg.Gauges(9) '第10个仪表,用于存放饼图的仪表  
  4. lg.CoverShapes.Clear '清空CoverShapes的形状  
  5. rg.CoverShapes.Clear '清空CoverShapes的形状  
  6.   
  7. Dim drs As List(Of DataRow) = DataTables("产业分布").Select("""数量"'获取饼图项目  
  8. Dim sum As Integer '数量合计  
  9. Dim dr As DataRow  
  10. For Each dr In drs  
  11.     sum += dr("数量")  
  12. Next   
  13. 'Dim h As Integer = Math.Floor(100 / ss.Length) - 2  
  14. Dim startAngle As Double = 0 '起始角度  
  15. Dim minRadius As Integer = 40 '指定最小扇形的外半径  
  16. Dim sweepAngle As Double '扇形角度  
  17.   
  18. Dim grt As GaugeRectangle  
  19. Dim gct As GaugeCaption  
  20. Dim gs As GaugeSector  
  21. Dim clrs As GaugeColorMap = rg.ColorMaps(0) '获取预定义的颜色,http://www.foxtable.com/webhelp/topics/3979.htm  
  22.   
  23. For i As Integer = 0 To drs.Count - 1 '遍历所有项目  
  24.     dr = drs(i)  
  25.     Dim cl As Color = clrs.ValueColors(i).Color '按顺序取颜色  
  26.     gct = New GaugeCaption '添加标题  
  27.     gct.Text = dr("名称")  
  28.     gct.Font = New Font("微软雅黑", 7.5F)  
  29.     gct.FontSize = 3  
  30.     gct.Color = Color.White  
  31.     gct.Viewport.Height = 10 '固定标题高度  
  32.     gct.Viewport.Width = 70 '固定标题宽度  
  33.     gct.Viewport.MarginX = 10 '左右边距  
  34.     gct.Viewport.x = -1 '靠右停靠  
  35.     gct.Viewport.y = 42 + i * 20 '距上边距Y轴  
  36.     lg.CoverShapes.Add(gct)  
  37.       
  38.     grt = New GaugeRectangle '添加带颜色的小方块  
  39.     grt.Viewport.MarginX = 90  
  40.     grt.Viewport.Height = 10 '固定高度  
  41.     grt.Viewport.Width = 10'固定宽度  
  42.     grt.Viewport.x = -1 '靠右停靠  
  43.     grt.Viewport.y = 40 + i * 20 '距上边距Y轴  
  44.     grt.Border.Color = cl  
  45.     grt.Filling.Color = cl  
  46.     grt.Name = "产业分布_" & dr("名称") & "_d" '设置名称,用于点击互动  
  47.     lg.CoverShapes.Add(grt)  
  48.       
  49.     gs = New GaugeSector '添加项目对应的扇形  
  50.     gs.CenterRadius = 0   
  51.     gs.InnerRadius = 10  
  52.     gs.OuterRadius = minRadius + 10 * i '每个扇形都比上一个的外半径增加10%  
  53.     gs.StartAngle = startAngle  
  54.     sweepAngle = (dr("数量") / sum) * 360 '计算每个项目对应的扇形需要的角度  
  55.     gs.SweepAngle = sweepAngle  
  56.     startAngle = startAngle + sweepAngle '下一个扇形的起始角度  
  57.     gs.Border.Color = Color.Transparent '去掉边框  
  58.     gs.Filling.Color = cl '填充颜色  
  59.     gs.Name = "产业分布_" & dr("名称"'设置形状的名称,用于点击互动  
  60.     rg.CoverShapes.Add(gs) '添加到CoverShapes  
  61. Next