Silverlight 雷达图和一种特殊泡泡画法

自上次发了雷达图，也没怎么说一下。

这次又做了一种图，继续共享一下，就是以一个点为中心，周围绕着几个点，用一个箭头与中心相连并带有某些信息。圆和中心都可以响应鼠标事件。

我一向不会讲解所做的东西。所以大部分我直接上源码的。

简单讲解一下：

代码结构分为4部分，

首先是画布，其实就是一个canvas因为现在只有二种图，

一个雷达画布 RadarCanvas（比较特殊），和一个二维坐标画布 CoorCanvas，都派生自ChartCanvas;

2.就是轴

坐标轴CoorAxis 和Radaraxis 都派生自IAxis,其实里面什么也没有。就是一个存一些值，比较这个轴的颜色，它的起始与终结坐标。雷达轴的角度偏移等，。

3.model

存值的类了，暂时有 clm泡泡图的点击事件参数 CLMArrowClickEventArg,DataPoint图坐标点，图点点击事件参数ItemClickEventArg，字段映射Itemmapping

4.图形

现有CLMBubbleSeries，它是一个特殊的泡泡图，我们项目中用到的。这里就不说它有什么用。只讲实现。

RadarSeries，它就是雷达图形

它们都继承自ISeries

核心就是讲Series怎么画的

首先看它们的基类:

View Code

嗯。没有很多东西，都是一些基础操作，和几个接口。

下面就可以看泡泡图CLMBubbleSeries:

其构造函数：

 public CLMBubbleSeries(CoorCanvas canvas)
            : base(canvas) {
                this.stroke = new SolidColorBrush(Color.FromArgb(255,51,128)">153,128)">255));
                this.Fill = 188,128)">222,128)">255));
        }

初始化它的颜色。

最重要的是二个函数

View Code

画一个中心圆，和用InitPoint来画周围的小圆。

View Code

最后是画坐标图代码：

       /// <summary>
        /// 画坐标图
        </summary>
        private void DrawCoor()
        {
            if (!IsDrawBaseLine) return;

            coorGeometry.figures.Clear();

            var xaxis = new Axis.CoorAxis();
            xaxis.AxisShap = coorPath;
            xaxis.AType = Axis.AxisType.XValue;

            var yaxis = new Axis.CoorAxis();
            yaxis.AType = Axis.AxisType.YValue;
            yaxis.AxisShap = coorPath;
            
            this.Axises.Add(xaxis);
            this.Axises.Add(yaxis);

            var coorfigure = new Pathfigure();
            coorGeometry.figures.Add(coorfigure);
            
            //画上箭头
            yaxis.StartPoint = coorfigure.StartPoint = new Point(Margin.Left,Margin.Top - arrowMargin);
            var tlp = new Point() { X = Margin.Left - arrowMargin,Y = Margin.Top + arrowMargin };
            coorfigure.Segments.Add(new Linesegment() { Point = tlp });
            coorfigure.Segments.Add(new Linesegment() { Point = coorfigure.StartPoint });
            var trp = new Point() { X = Margin.Left + arrowMargin,255)">new Linesegment() { Point = trp });
            coorfigure.Segments.Add(new Linesegment() { Point = coorfigure.StartPoint });

            左侧Y轴
            yaxis.EndPoint = xaxis.StartPoint = new Point() { X = Margin.Left,Y = this.Height - Margin.Bottom };
            coorfigure.Segments.Add(new Linesegment() { Point = xaxis.StartPoint });
            x轴
            xaxis.EndPoint = new Point() { X = this.Width - Margin.Right + arrowMargin,Y = xaxis.StartPoint.Y };
            coorfigure.Segments.Add(new Linesegment() { Point = xaxis.EndPoint });
            
            画右箭头
            var brtp = this.Width - Margin.Right - arrowMargin,Y = xaxis.EndPoint.Y - arrowMargin };
            var brbp = new Point() { X = brtp.X,Y = xaxis.EndPoint.Y + arrowMargin };
            coorfigure.Segments.Add(new Linesegment() { Point = brtp });
            coorfigure.Segments.Add(new Linesegment() { Point = xaxis.EndPoint });
            coorfigure.Segments.Add(new Linesegment() { Point = brbp });
            coorfigure.Segments.Add(new Linesegment() { Point = brbp });

            AddChild(coorPath);

            DrawLine();画虚线
        }

         画虚线
        void DrawLine()
        {
            var w = this.Width - Margin.Left - Margin.Right;
            var h = this.Height - Margin.Top - Margin.Bottom;

            var vstep = h / HorizontalCount;
         
            for (var i = 1; i <= HorizontalCount; i++)
            {
                var l = new Line();
                l.strokeLineJoin = PenLineJoin.Round;
                l.strokeDashArray.Add(4);
                l.stroke = DashColor;
                l.strokeThickness = 1;
                l.X1 = Margin.Left;
                l.Y1 = this.Height - Margin.Bottom - (vstep * i);
                l.X2 = this.Width - Margin.Right;
                l.Y2 = l.Y1;
                AddChild(l);
            }

            var xstep = w / VerticalCount;
            1; i <= VerticalCount; i++)
            {
                new Line();
                l.stroke = DashColor;
                l.strokeDashArray.Add(4);
                l.strokeThickness = 1;
                l.X1 = Margin.Left + xstep * i;
                l.Y1 = Margin.Top;
                l.X2 = l.X1;
                l.Y2 = this.Height - Margin.Bottom;
                AddChild(l);
            }

啊。我是正的不太会讲解。直接上源码算了

源码地址：源码

Silverlight 雷达图和一种特殊泡泡画法

相关推荐