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

 

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

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

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

简单讲解一下：

代码结构分为4部分，

1.

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

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

2.就是轴

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

 

3.model

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

 

4.图形

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

RadarSeries，它就是雷达图形

它们都继承自ISeries

 

核心就是讲Series怎么画的

 

首先看它们的基类:

/// <summary>
    /// 图表线或图接口
    /// </summary>
    public abstract class ISeries : Common.IBaseControl
    {
        public ISeries(ChartCanvas canvas)
        {
            Canvas = canvas;
            
            Points = new System.Collections.ObjectModel.ObservableCollection<Model.DataPoint>();

            ItemMappings = new System.Collections.ObjectModel.ObservableCollection<Model.ItemMapping>();
        }

        /// <summary>
        /// 动画执行时间
        /// </summary>
        protected const int AnimateDurtion = 1000;

        /// <summary>
        /// 项单击事件
        /// </summary>
        public EventHandler<Model.ItemClickEventArg> ItemClick;

        /// <summary>
        /// 画布
        /// </summary>
        public ChartCanvas Canvas { get; set; }

        /// <summary>
        /// 当前颜色
        /// </summary>
        public Brush Stroke
        {
            get;
            set;
        }

        /// <summary>
        /// 填充色
        /// </summary>
        public Brush Fill
        {
            get;
            set;
        }

        /// <summary>
        /// 图例名
        /// </summary>
        public string LegendLabel
        {
            get;
            set;
        }

        /// <summary>
        /// 当前线的label格式
        /// /// #Y=当前值，#YName=当前Y轴名称,#C{列名}=表示绑定当前数据对象的指定列值
        /// </summary>
        public string ItemTooltipFormat { get; set; }

        /// <summary>
        /// 当前绑定的对象
        /// </summary>
        public object DataContext { get; set; }

        /// <summary>
        /// 当前索引
        /// </summary>
        public int Index { get; set; }

        /// <summary>
        /// 图点
        /// </summary>
        public System.Collections.ObjectModel.ObservableCollection<Model.DataPoint> Points { get; set; }

        /// <summary>
        /// 当前图型属性映射
        /// </summary>
        public System.Collections.ObjectModel.ObservableCollection<Model.ItemMapping> ItemMappings
        {
            get;
            internal set;
        }

        /// <summary>
        /// 获取对象的属性的值
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public object GetValue(string name)
        {
            var mapping = GetMapping(name);
            if (mapping != null) name = mapping.MemberName;

            var obj = Common.Helper.GetPropertyName(DataContext, name);
            return obj;
        }

        /// <summary>
        /// 获取对象的值
        /// </summary>
        /// <param name="name">属性名</param>
        /// <returns></returns>
        public double GetNumberValue(string name)
        {
            double value = 0;
            var obj = GetValue(name);
            if (obj != null)
            {
                if (Silverlight.Common.Data.TypeHelper.IsNumber(obj.GetType()))
                {
                    if (!double.TryParse(obj.ToString(), out value))
                    {
                        value = Index + 1;
                    }
                }
                else
                {
                    value = Index + 1;
                }
            }
            return value;
        }

        /// <summary>
        /// 获取指定的字段映射
        /// </summary>
        /// <param name="dm"></param>
        /// <returns></returns>
        public Model.ItemMapping GetMapping(Model.ItemMapping.EnumDataMember dm)
        {
            foreach (var m in ItemMappings)
            {
                if (m.DataMember == dm) return m;
            }
            return null;
        }

        /// <summary>
        /// 获取指定的字段映射
        /// </summary>
        /// <param name="dm"></param>
        /// <returns></returns>
        public Model.ItemMapping GetMapping(string name)
        {
            foreach (var m in ItemMappings)
            {
                if (name.Equals(m.OldName, StringComparison.OrdinalIgnoreCase) ||
                    name.Equals(m.MemberName, StringComparison.OrdinalIgnoreCase) ||
                    name.Equals(m.DisplayName, StringComparison.OrdinalIgnoreCase)) 
                    return m;
            }
            return null;
        }

        /// <summary>
        /// 获取指定的字段映射
        /// </summary>
        /// <param name="dm"></param>
        /// <returns></returns>
        public System.Collections.Generic.IEnumerable<Model.ItemMapping> GetMappings(Model.ItemMapping.EnumDataMember dm)
        {
            var ms = (from m in ItemMappings
                      where m.DataMember == dm
                      select m).ToArray<Model.ItemMapping>();
            return ms;
        }

        /// <summary>
        /// 当前动画
        /// </summary>
        protected Storyboard storyboard;

        /// <summary>
        /// 展现
        /// </summary>
        public virtual void Draw()
        {
            var ps = CreatePath();
            foreach (var p in ps)
            {
                Canvas.AddChild(p);
            }
            if (storyboard != null && Canvas.IsAnimate)
            {
                storyboard.Begin();
            }
        }

        System.Collections.Generic.List<Shape> shaps=new System.Collections.Generic.List<Shape>();
        /// <summary>
        /// 当前线条
        /// </summary>
        public System.Collections.Generic.List<Shape> Shaps
        {
            get { return shaps; }
            protected set { shaps = value; }
        }

        /// <summary>
        /// 生成图形
        /// </summary>
        /// <returns></returns>
        public virtual System.Collections.Generic.IEnumerable<Shape> CreatePath()
        {
            return Shaps;
        }

        /// <summary>
        /// 生成图例
        /// </summary>
        /// <returns></returns>
        internal virtual StackPanel CreateLegend()
        {
            if (!string.IsNullOrWhiteSpace(LegendLabel))
            {
                var panel = new StackPanel();
                panel.Orientation = Orientation.Horizontal;
                var colorarea = new Rectangle();
                colorarea.Width = 20;
                colorarea.Height = 10;
                colorarea.Fill = this.Fill;
                colorarea.Stroke = this.Stroke;
                panel.Margin = new Thickness(2);
                panel.Children.Add(colorarea);

                var text = new TextBlock();
                text.Margin = new Thickness(2);

                var dic=new System.Collections.Generic.Dictionary<string,string>();
                foreach (var m in ItemMappings)
                {
                    if (!dic.ContainsKey("YName") && !string.IsNullOrWhiteSpace(m.DisplayName))
                    {
                        dic.Add("YName", m.DisplayName??m.MemberName);
                    }
                }

                text.Text = Common.Helper.DserLabelName(LegendLabel,dic ,
                        (string name) =>
                        {
                            return GetValue(name);
                        });
                text.Foreground = new SolidColorBrush(Colors.Black);
                panel.Children.Add(text);

                return panel;
            }
            return null;
        }

        /// <summary>
        /// 添加点的小圆圈，方便鼠标点中。并加提示
        /// </summary>
        /// <param name="center"></param>
        /// <param name="rotate"></param>
        protected Ellipse AddPoint(Point center, double rotate,object tooltip,Model.DataPoint p)
        {
            var circle = Common.Helper.CreateEllipse(center, rotate);
            circle.Stroke = this.Stroke;
            circle.Fill = this.Fill;
            ToolTipService.SetToolTip(circle, tooltip);

            if (this.ItemClick != null) {
                circle.Cursor = Cursors.Hand;
                circle.MouseLeftButtonUp += (sender, e) => {
                    var arg = new Model.ItemClickEventArg() { 
                     Data=this.DataContext,
                      Item=p
                    };
                    ItemClick(circle,arg);
                };
            }

            Canvas.AddChild(circle);

            System.Windows.Controls.Canvas.SetZIndex(circle, Common.BaseParams.TooltipZIndex);

            return circle;
        }

        /// <summary>
        /// 生成提示信息
        /// #Y=当前值，#YName=当前Y轴名称,#C{列名}=表示绑定当前数据对象的指定列值
        /// </summary>
        /// <returns></returns>
        protected string CreateTooltip(string yName)
        {
            if (!string.IsNullOrWhiteSpace(this.ItemTooltipFormat))
            {
                var yvalue = GetValue(yName);
                var tmp = Common.Helper.DserLabelName(this.ItemTooltipFormat,
                    new System.Collections.Generic.Dictionary<string, string>() { { "YName", yName }, { "Y", yvalue==null?"":yvalue.ToString() } }, 
                    (string name) =>
                    {
                        return GetValue(name);
                    });
                return tmp;
            }
            return this.ItemTooltipFormat;
        }

        public void Show()
        {
            throw new NotImplementedException();
        }

        public void Hide()
        {
            throw new NotImplementedException();
        }
    }

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

 

下面就可以看泡泡图CLMBubbleSeries:

其构造函数：

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

初始化它的颜色。

最重要的是二个函数

/// <summary>
        /// 生成当前图形
        /// </summary>
        /// <returns></returns>
        public override System.Collections.Generic.IEnumerable<Shape> CreatePath()
        {
            if (storyboard != null) storyboard.Stop();
            if (Canvas.IsAnimate) this.storyboard = new Storyboard();

            this.Shaps.Clear();
            if (DataContext == null) return base.CreatePath();
            var data = DataContext as System.Collections.ICollection;

            var circlesize = data.Count > 20 ? circleSize / data.Count * 20 : circleSize;
            var center=new Point() { X = this.Canvas.Width / 2, Y = centerSize * 2.3 };
            var left = Canvas.Margin.Left + circlesize * 2;
            if (left <= circlesize / 2) left = circlesize + 2;
            var bottom = (center.Y + circlesize + centerSize);
            var maxbottom = Canvas.Height - Canvas.Margin.Bottom - circlesize - 4;
            //距离中心距离
            var radiacenter = Math.Min(center.X - left, maxbottom);
            var circleIndex = -1;            

            //小圆个数
            var circlecount = data.Count;
            var rotatestep = 3.78 / circlecount;//每个小圆的角度
            var mapping = GetMapping(Model.ItemMapping.EnumDataMember.Y);

            if (mapping == null) throw new Exception("至少需要指定一个Y轴字段映射");
            //与中心点关联设置
            var links = GetMappings(Model.ItemMapping.EnumDataMember.CLMLink);

            var tocentername="";
            //画泡泡
            foreach (var m in data)
            {
                if (m != null)
                {
                    var item = new Model.DataPoint();
                    
                    item.PotinShape= new Path();
                    var v = Common.Helper.GetPropertyName(m, mapping.MemberName); ;
                    item.PointType = Model.DataPoint.EnumPointType.ChartPoint;
                    item.StringValue = v==null?"":v.ToString();
                    System.Windows.Controls.Canvas.SetZIndex(item.PotinShape, Common.BaseParams.ShapZIndex);
                   
                    var el = new EllipseGeometry();
                    item.PotinShape.Data = el;

                    //画中心位置
                    if (circleIndex == -1)
                    {
                        item.Position = el.Center = center;
                        el.RadiusX = el.RadiusY = centerSize;
                        item.Width = item.Height = centerSize * 2;
                        tocentername = item.StringValue;
                        item.StringValue =(CenterName??mapping.MemberName) + "\n" + item.StringValue;

                        var label = item.CreateLabel();
                        //加入标签
                        Canvas.AddChild(label);

                        if (ItemClick != null)
                        {
                            label.Cursor = Cursors.Hand;
                            var centerdata = m;
                            label.MouseLeftButtonUp += (sender, e) =>
                            {
                                var arg = new Model.ItemClickEventArg()
                                {
                                    Data = centerdata,
                                    Item = item
                                };
                                ItemClick(sender, arg);
                            };
                        }

                        var tootip = CreateTooltip(m);
                        ToolTipService.SetToolTip(label,tootip);
                    }
                    //画边上的小圆
                    else
                    {
                        //初始化小圆点
                        InitPoint(el, item, rotatestep, circleIndex, radiacenter, center, maxbottom, circlesize, tocentername,circlecount,links,m);
                    }
                    
                    if(Canvas.IsFillShape)item.PotinShape.Fill = this.Fill;
                    item.PotinShape.Stroke = this.Stroke;
                    item.PotinShape.StrokeThickness = Canvas.LineWidth;
                    this.Shaps.Add(item.PotinShape);
                    
                    circleIndex++;                    
                }
            }

            return base.CreatePath();
        }

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

/// <summary>
        /// 初始化项
        /// </summary>
        /// <param name="el"></param>
        /// <param name="item"></param>
        /// <param name="rotatestep"></param>
        /// <param name="circleIndex"></param>
        /// <param name="radiacenter"></param>
        /// <param name="center"></param>
        /// <param name="maxbottom"></param>
        /// <param name="circlesize"></param>
        /// <param name="tocentername"></param>
        private void InitPoint(EllipseGeometry el,Model.DataPoint item,
            double rotatestep, int circleIndex, double radiacenter, Point center,
            double maxbottom, double circlesize, string tocentername, int circlecount,
            System.Collections.Generic.IEnumerable<Model.ItemMapping> links,object data)
        {
            var position = new Point();            
            var rotate = rotatestep * circleIndex + 2.95;
            var rsin = Math.Sin(rotate);
            var rcos = Math.Cos(rotate);
            //二圆偏移量           
            var ystep = rsin * radiacenter;
            var xstep = rcos * radiacenter;

            position.X = center.X + xstep;
            position.Y = center.Y - ystep;

            if (position.Y >= maxbottom) position.Y = maxbottom;

            item.Position = position;
            el.RadiusX = el.RadiusY = circlesize;
            item.Width = item.Height = circlesize * 2;

            var arrow = new Controls.CLMArrow(Canvas);
            arrow.Fill = this.Fill;
            arrow.Stroke = this.Stroke;
            arrow.Rotate = rotate;
            arrow.ToName = tocentername;
            arrow.FromName = item.StringValue;
            arrow.RotateSin = rsin;
            arrow.RotateCos = rcos;

            var startystep = (circlesize) * arrow.RotateSin;
            var startxstep = (circlesize) * arrow.RotateCos;
            arrow.StartPoint = new Point(item.Position.X - startxstep, item.Position.Y + startystep);
            var endystep = centerSize * arrow.RotateSin;
            var endxstep = centerSize * arrow.RotateCos;
            arrow.EndPoint = new Point(center.X + endxstep, center.Y - endystep);

            if (links != null)
            {
                var count = links.Count<Model.ItemMapping>();
                if (count > 0)
                {
                    var lnk = links.ElementAt<Model.ItemMapping>(0);
                    var tmp = Common.Helper.GetPropertyName(data, lnk.MemberName);
                    if (!string.IsNullOrWhiteSpace(lnk.MarkName)) arrow.FromMarkName = lnk.MarkName;
                    arrow.FromValue = tmp == null ? "" : tmp.ToString();
                }
                if (count > 1)
                {
                    var lnk = links.ElementAt<Model.ItemMapping>(1);
                    var tmp = Common.Helper.GetPropertyName(data, lnk.MemberName);
                    if (!string.IsNullOrWhiteSpace(lnk.MarkName)) arrow.ToMarkName = lnk.MarkName;
                    arrow.ToValue = tmp == null ? "" : tmp.ToString();
                }
            }

            //设置箭头提示事件
            if (ArrowTooltipClick != null) arrow.SetClickEvent(ArrowTooltipClick);

            arrow.Draw();
            item.TargetControl = arrow;

            var label = item.CreateLabel();
            Canvas.AddChild(label);

            if (ItemClick != null)
            {
                label.Cursor = Cursors.Hand;
                label.MouseLeftButtonUp += (sender, e) =>
                {
                    var arg = new Model.ItemClickEventArg()
                    {
                        Data = data,
                        Item = item
                    };
                    ItemClick(sender, arg);
                };
            }

            if (Canvas.IsAnimate)
            {
                label.Visibility = Visibility.Collapsed;
                var anima = new PointAnimation();
                anima.To = position;
                anima.Duration = TimeSpan.FromMilliseconds(AnimateDurtion);

                Storyboard.SetTarget(anima, el);
                el.Center = center;
                Storyboard.SetTargetProperty(anima, new PropertyPath("Center"));

                var sizeanimax = new DoubleAnimation();
                sizeanimax.From = 0;
                sizeanimax.To = circlesize;
                Storyboard.SetTarget(sizeanimax, el);
                Storyboard.SetTargetProperty(sizeanimax, new PropertyPath("RadiusX"));

                var sizeanimay = new DoubleAnimation();
                sizeanimay.From = 0;
                sizeanimay.To = circlesize;
                Storyboard.SetTarget(sizeanimay, el);
                Storyboard.SetTargetProperty(sizeanimay, new PropertyPath("RadiusY"));

                anima.Completed += new EventHandler((sender, e) =>
                {
                    label.Visibility = Visibility.Visible;
                    InitMouseEvent(label, arrow);
                    if (circleIndex == circlecount / 2 - 1) { 
                        arrow.Show();
                        currentShowedArrow = arrow;
                    }
                });
                this.storyboard.Children.Add(anima);
                this.storyboard.Children.Add(sizeanimax);
                this.storyboard.Children.Add(sizeanimay);
            }
            else
            {
                el.Center = position;
                //加入标签
                //var label = item.CreateLabel();
                //Canvas.AddChild(label);
                InitMouseEvent(label, arrow);
                if (circleIndex == circlecount / 2 - 1) { 
                    arrow.Show();
                    currentShowedArrow = arrow;
                }
            }
        }

 

最后是画坐标图代码：

       /// <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 = tlp });
            coorfigure.Segments.Add(new LineSegment() { Point = coorfigure.StartPoint });
            var trp = new Point() { X = Margin.Left + arrowMargin, Y = Margin.Top + arrowMargin };
            coorfigure.Segments.Add(new LineSegment() { Point = trp });
            coorfigure.Segments.Add(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 = new Point() { X = 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 = 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();//画虚线
        }

        /// <summary>
        /// 画虚线
        /// </summary>
        private 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;
            for (var i = 1; i <= VerticalCount; i++)
            {
                var l = 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);
            }

 

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

源码地址：源码