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

 

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

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

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

简单讲解一下：

代码结构分为4部分，

1.

首先是画布，其实就是一个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, 153, 255));                this.Fill = new SolidColorBrush(Color.FromArgb(255, 188, 222, 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 = 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);            }

 

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

源码地址：源码