Visifire图表控件对有大差异数据的图标绘制问题

好的图表不仅能够起到美化布局的作用，而且对于数据的展示也会更加的形象直观，但是有时候也会出现这种情况，比如说数据的差异比较大的情况，在这种情况下呢，有的非常小的数据可能在图表中就不能够展示出来。

最近刚好在看Visifire的图表，发现里面的文字标注栏的Legend点击事件就可以有效的避免这个问题。

下面就以在日常生活中比较常见的电脑网络发包量为例来进行说明，这是我在网上看见的一个例子：

例如在统计一组用户电脑的网络发包量的时候，有一些用户开启电脑几十个小时，有一些用户开启电脑几秒钟。很明显用户开机几十个小时的发包量巨大，而开机几秒钟的发包量极小，如果放在一个Visifire的图标中组成一个统计列的时候，发包量小的电脑几乎看不见了。这种情况下，我们就可以通过点击文字标注栏的Legend文字来确定某一个在图表上看不见的用户电脑的发包量。

第一步：设置一个实体类，该类包含（ComputerName，NetWorkNum）两个属性，分别代码电脑名和电脑网络发包量：

/// <summary>
/// 电脑信息
/// </summary>
publicclass ComputerInfomation
{
string_ComputerName;
string_NetWorkNum;
/// <summary>
/// 电脑名称
/// </summary>
publicstringComputerName
{
get{return_ComputerName; }
set{ _ComputerName = value; }
}
/// <summary>
/// 网络发送包
/// </summary>
publicstringNetWorkNum
{
get{return_NetWorkNum; }
set{ _NetWorkNum = value; }
}
}
第二步：实例化该类形成多个实体类对象集合，MainPage.xaml.cs的构造函数中敲入代码如下：
ComputerList =newList<ComputerInfomation>()
{
newComputerInfomation(){ComputerName="张三的电脑", NetWorkNum="32143242223"},
newComputerInfomation(){ComputerName="李四的电脑", NetWorkNum="23432423"},
newComputerInfomation(){ComputerName="王五的电脑", NetWorkNum="12342342344"},
newComputerInfomation(){ComputerName="刘六的电脑", NetWorkNum="562342"},
newComputerInfomation(){ComputerName="林七的电脑", NetWorkNum="55353453445"},
newComputerInfomation(){ComputerName="马林的电脑", NetWorkNum="2454555543"}
};
BindChart(ComputerList);
第三步：制作一个函数，此函数创建一个图表并且设置相应的Legend文字标注栏的事件绑定
List<ComputerInfomation> ComputerList =newList<ComputerInfomation>();
/// <summary>
/// 绑定一个图标
/// </summary>
/// <param name="computerList">用户电脑类实体集合</param>
publicvoidBindChart( List<ComputerInfomation> computerList)
{
Chart chart =newChart();
chart.Width = 400;
chart.Height = 550;
chart.Name ="Chart";
chart.SetValue(Canvas.LeftProperty, 30.0);
chart.SetValue(Canvas.TopProperty, 30.0);
chart.Theme ="Theme1";//设置皮肤
chart.BorderBrush =newSolidColorBrush(Colors.Gray);
chart.AnimatedUpdate =true;
chart.CornerRadius =newCornerRadius(7);
chart.ShadowEnabled =true;
chart.Padding =newThickness(4, 4, 4, 10);

#region 设置Title
Title title =newTitle();
title.Text ="电脑网络发包统计";
chart.Titles.Add(title);
#endregion

#region 设置AxesX
Axis xAxis =newAxis();
xAxis.Title ="用户电脑";
chart.AxesX.Add(xAxis);
#endregion

#region 设置AxesY
Axis yAxis =newAxis();
yAxis.Title ="用户网卡发送包";
yAxis.Prefix ="发送：";
yAxis.Suffix ="包";
chart.AxesY.Add(yAxis);
#endregion

#region 设置PlotArea
PlotArea plot =newPlotArea();
plot.ShadowEnabled =false;
chart.PlotArea = plot;
#endregion

#region 设置Legends
Legend legend =newLegend();
//Legend文字标注栏绑定一个事件Legend_MouseLeftButtonDown
legend.MouseLeftButtonDown +=newEventHandler<LegendMouseButtonEventArgs>(Legend_MouseLeftButtonDown);
chart.Legends.Add(legend);
#endregion
#region
Visifire.Charts.ToolTip tip =newVisifire.Charts.ToolTip();
tip.VerticalAlignment = VerticalAlignment.Bottom;
chart.ToolTips.Add(tip);
#endregion
#region 创建数据序列和数据点
foreach(ComputerInfomation cominfoincomputerList)
{
DataSeries dseries =newDataSeries();
//设置一个数据序列的LengendText值为ComputerName
dseries.LegendText = cominfo.ComputerName;
//设置图表的类型为RenderAs.StackedColumn
dseries.RenderAs = RenderAs.StackedColumn;
//设置一个数据点
DataPoint dpointUpload =newDataPoint();
//数据点的Y坐标值
dpointUpload.YValue =double.Parse(cominfo.NetWorkNum);
//数据点的Tag值也为电脑名称，用于数据点被点击后对比判断当前点击的点
dpointUpload.Tag = cominfo.ComputerName;
//设置数据点被点击之后触发事件Dpoint_MouseLeftButtonDown
dpointUpload.MouseLeftButtonDown +=newMouseButtonEventHandler(Dpoint_MouseLeftButtonDown);
dseries.DataPoints.Add(dpointUpload);
chart.Series.Add(dseries);
}
#endregion
#region 设置遮罩，将Visifire的LOGO遮挡住。
StackPanel sp =newStackPanel();
sp.Width = 145;
sp.Height = 15;
sp.Margin =newThickness(0, 3, 3, 0);
sp.VerticalAlignment = VerticalAlignment.Top;
sp.HorizontalAlignment = HorizontalAlignment.Right;
sp.Background =newSolidColorBrush(Colors.White);
#endregion
LayoutRoot.Children.Add(chart);
LayoutRoot.Children.Add(sp);
}
第四步：Lengend事件的设置，那么下面我们贴出Lengend被点击事件和DataPoint被点击事件的处理函数
/// <summary>
/// DataPoint被点击执行事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voidDpoint_MouseLeftButtonDown(objectsender, MouseButtonEventArgs e)
{
//接收到当前被点击的LengendText的值
DataPoint dpoint = senderasDataPoint;
stringstr = dpoint.Tag.ToString();
foreach(ComputerInfomation cominfoinComputerList)
{
if(str == cominfo.ComputerName)
{
MessageBox.Show(cominfo.ComputerName +"网络发送："+ cominfo.NetWorkNum +"数据包");
}
}
}
/// <summary>
/// Legend文字被点击执行的事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
privatevoidLegend_MouseLeftButtonDown(objectsender, LegendMouseButtonEventArgs e)
{
//接收到当前被点击的LengendText的值
stringstr = e.DataSeries.LegendText.ToString();
foreach(ComputerInfomation cominfoinComputerList)
{
if(str == cominfo.ComputerName)
{
MessageBox.Show(cominfo.ComputerName +"网络发送："+ cominfo.NetWorkNum +"数据包");
}
}
}

通过以上的方法就很好的解决了数据差异的问题，效果图如下所示：