自上次发了雷达图，也没怎么说一下。
这次又做了一种图，继续共享一下，就是以一个点为中心，周围绕着几个点，用一个箭头与中心相连并带有某些信息。圆 和中心都可以响应鼠标事件。
我一向不会讲解所做的东西。所以大部分我直接上源码的。
简单讲解一下：
代码结构分为4部分，
1.
首先是画布，其实就是一个canvas因为现在只有二种图，
一个雷达画布 RadarCanvas（比较特殊），和一个二维坐标画布 CoorCanvas，都派生自ChartCanvas;
2.就是轴
坐标轴CoorAxis 和RadarAxis 都派生自IAxis,其实里面什么也没有。就是一个存一些值，比较这个轴的颜色，它的起始与终结坐标。雷达轴的角度偏移等，。
3.model
存值的类了，暂时有 clm泡泡图的点击事件参数 CLMArrowClickEventArg,DataPoint图坐标点，图点点击事件参数ItemClickEventArg，字段映射ItemMapping
4.图形
现有CLMBubbleSeries，它是一个特殊的泡泡图，我们项目中用到的。这里就不说它有什么用。只讲实现。
RadarSeries，它就是雷达图形
它们都继承自ISeries
核心就是讲Series怎么画的
首先看它们的基类:
View Code
/// <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));
}
初始化它的颜色。
最重要的是二个函数
View Code
/// <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来画周围的小圆。
View Code
/// <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);
}
啊。我是正的不太会讲解。直接上源码算了
源码地址：源码
时间： 2024-09-13 10:35:53