欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

C# 使用GDI绘制雷达图

程序员文章站 2023-11-14 09:40:04
最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: 1 public static class RadarDemo 2 { 3 static float mW = 1200; 4 static float mH = 1200 ......

最近项目要用c#实现画一个雷达图,搜了搜网上竟然找不到c#画雷达图的解决方案,那么自己实现一个吧

实现效果如下图:

C# 使用GDI绘制雷达图

代码如下:

  1     public static class radardemo
  2     {
  3         static float mw = 1200;
  4         static float mh = 1200;
  5         static dictionary<string, float> mdata = new dictionary<string, float>
  6         {
  7                 //{ "速度",77},
  8                 { "力量", 72},
  9                 { "防守", 110},
 10                 { "射门", 50},
 11                 { "传球", 80},
 12                 { "耐力", 60 }
 13         };//维度数据
 14         static float mcount = mdata.count; //边数
 15         static float mcenter = mw * 0.5f; //中心点
 16         static float mradius = mcenter - 100; //半径(减去的值用于给绘制的文本留空间)
 17         static double mangle = (math.pi * 2) / mcount; //角度
 18         static graphics graphics = null;
 19         static int mpointradius = 5;  // 各个维度分值圆点的半径   
 20         static int textfontsize = 18;   //顶点文字大小 px
 21         const string textfontfamily = "microsoft yahei"; //顶点字体
 22         static color linecolor = color.green;
 23         static color fillcolor = color.fromargb(128, 255, 0, 0);
 24         static color fontcolor = color.black;
 25 
 26         public static void show()
 27         {
 28             bitmap img = new bitmap((int)mw, (int)mh); 
 29             graphics = graphics.fromimage(img);  
 30             graphics.clear(color.white);
 31             img.save($"{appdomain.currentdomain.basedirectory}radar/0.png", imageformat.png);
 32             drawpolygon(graphics);
 33             img.save($"{appdomain.currentdomain.basedirectory}radar/1.png", imageformat.png);
 34             drawlines(graphics);
 35             img.save($"{appdomain.currentdomain.basedirectory}radar/2.png", imageformat.png);
 36             drawtext(graphics);
 37             img.save($"{appdomain.currentdomain.basedirectory}radar/3.png", imageformat.png);
 38             drawregion(graphics);
 39             img.save($"{appdomain.currentdomain.basedirectory}radar/4.png", imageformat.png);
 40             drawcircle(graphics);
 41             img.save($"{appdomain.currentdomain.basedirectory}radar/5.png", imageformat.png);
 42             img.dispose();
 43             graphics.dispose();
 44 
 45         }
 46 
 47 
 48         // 绘制多边形边
 49         private static void drawpolygon(graphics ctx)
 50         {
 51             var r = mradius / mcount; //单位半径
 52             pen pen = new pen(linecolor);
 53             //画6个圈
 54             for (var i = 0; i < mcount; i++)
 55             {
 56                 var points = new list<pointf>();
 57                 var currr = r * (i + 1); //当前半径
 58                 //画6条边
 59                 for (var j = 0; j < mcount; j++)
 60                 {
 61                     var x = (float)(mcenter + currr * math.cos(mangle * j));
 62                     var y = (float)(mcenter + currr * math.sin(mangle * j));
 63                     points.add(new pointf { x = x, y = y });
 64                 }
 65                 ctx.drawpolygon(pen, points.toarray());
 66                 //break;
 67             }
 68 
 69             ctx.save();
 70         }
 71 
 72         //顶点连线
 73         private static void drawlines(graphics ctx)
 74         {
 75             for (var i = 0; i < mcount; i++)
 76             {
 77                 var x = (float)(mcenter + mradius * math.cos(mangle * i));
 78                 var y = (float)(mcenter + mradius * math.sin(mangle * i));
 79                 ctx.drawline(new pen(linecolor), new pointf { x = mcenter, y = mcenter }, new pointf { x = x, y = y });
 80                //break;
 81             }
 82             ctx.save();
 83         }
 84 
 85         //绘制文本
 86         private static void drawtext(graphics ctx)
 87         {
 88             var fontsize = textfontsize;//mcenter / 12;
 89             font font = new font(textfontfamily, fontsize, fontstyle.regular);
 90 
 91             int i = 0;
 92             foreach (var item in mdata)
 93             {
 94                 var x = (float)(mcenter + mradius * math.cos(mangle * i));
 95                 var y = (float)(mcenter + mradius * math.sin(mangle * i) - fontsize);
 96 
 97                 if (mangle * i > 0 && mangle * i <= math.pi / 2)
 98                 {
 99                     ctx.drawstring(item.key, font, new solidbrush(fontcolor), x - ctx.measurestring(item.key, font).width * 0.5f, y + fontsize/* y + fontsize*/);
100                 }
101                 else if (mangle * i > math.pi / 2 && mangle * i <= math.pi)
102                 {
103                     ctx.drawstring(item.key, font, new solidbrush(fontcolor), x - ctx.measurestring(item.key, font).width, y /*y + fontsize*/);
104                 }
105                 else if (mangle * i > math.pi && mangle * i <= math.pi * 3 / 2)
106                 {
107                     ctx.drawstring(item.key, font, new solidbrush(fontcolor), x - ctx.measurestring(item.key, font).width, y);
108                 }
109                 else if (mangle * i > math.pi * 3 / 2)
110                 {
111                     ctx.drawstring(item.key, font, new solidbrush(fontcolor), x - ctx.measurestring(item.key, font).width * 0.5f, y - fontsize * 0.5f);
112                 }
113                 else
114                 {
115                     ctx.drawstring(item.key, font, new solidbrush(fontcolor), x, y /* y + fontsize*/);
116                 }
117                 i++;
118             }
119             ctx.save();
120         }
121 
122         //绘制数据区域
123         private static void drawregion(graphics ctx)
124         {
125             int i = 0;
126             list<pointf> points = new list<pointf>();
127             foreach (var item in mdata)
128             {
129                 var x = (float)(mcenter + mradius * math.cos(mangle * i) * item.value / 100);
130                 var y = (float)(mcenter + mradius * math.sin(mangle * i) * item.value / 100);
131 
132                 points.add(new pointf { x = x, y = y });
133 
134                 //ctx.drawarc(new pen(linecolor), x, y, r, r, 0, (float)math.pi * 2); 
135                 i++;
136             }
137 
138 
139             //graphicspath path = new graphicspath();
140             //path.addlines(points.toarray());
141 
142             ctx.fillpolygon(new solidbrush(fillcolor), points.toarray());
143 
144             ctx.save();
145         }
146 
147         //画点
148         private static void drawcircle(graphics ctx)
149         {
150             //var r = mcenter / 18;
151             var r = mpointradius;
152 
153             int i = 0;
154             foreach (var item in mdata)
155             {
156                 var x = (float)(mcenter + mradius * math.cos(mangle * i) * item.value / 100);
157                 var y = (float)(mcenter + mradius * math.sin(mangle * i) * item.value / 100);
158                 ctx.fillpie(new solidbrush(fillcolor), x - r, y - r, r * 2, r * 2, 0, 360);
159                 //ctx.drawarc(new pen(linecolor), x, y, r, r, 0, (float)math.pi * 2); 
160                 i++;
161             }
162             ctx.save();
163         }
164 
165     }

把这个类粘贴到你的项目中,执行radardemo.show();就会在你的根目录里生成雷达图了,为了方便理解怎么画出来的,我把画每一个步骤时的图片都保存下来了。可以自行运行查看