Silverlight实用窍门序列:14.Visifire图表控件(一)【附带源码实例】
时间:2011-02-26 来源:程兴亮
首先我们需要从Visifire的官方网站下载:http://www.visifire.com/,新建一个项目,引入SLVisifire.Charts.dll。在MainPage.xaml.cs代码中添加代码:using Visifire.Charts;
准备工作做好了,此时我在这里直接编写了一个函数如下:
/// <summary>
/// 创建一个图表
/// </summary>
/// <param name="tableName">表名字</param>
/// <param name="updateTime">时间段的集合</param>
/// <param name="value">对应时间段集合的值</param>
/// <param name="row">本表在主Grid里面的ROW值</param>
/// <param name="column">本表在主Grid里面的column值</param>
/// <param name="rihgtStr">Y轴的后缀</param>
/// <param name="tspan">时间段间隔</param>
/// <param name="chartInterval">图表两点之间的间隔</param>
/// <param name="intervaltype">图表的X轴坐标按什么来分类,如时分秒</param>
public void CreateChart(string tableName, List<DateTime> updateTime, List<string> value, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype)
{
// 创建一个图标
Chart chart = new Chart();
// 设置图标的宽度和高度
chart.Width = 500;
chart.Height = 400;
chart.ToolBarEnabled = true;
// 设置图标的属性
chart.ScrollingEnabled = false;
chart.View3D = true;
// 创建一个标题的对象
Title title = new Title();
// 设置标题的名称
title.Text = tableName;
title.Padding = new Thickness(0, 10, 5, 0);
// 向图标添加标题
chart.Titles.Add(title);
// 初始化一个新的Axis
Axis xAxis = new Axis();
// 设置axis的属性
//图表的X轴坐标按什么来分类,如时分秒
xAxis.IntervalType = intervaltype;
//图表中的X轴坐标间隔如2,3,20等,单位为xAxis.IntervalType设置的时分秒。
xAxis.Interval = chartInterval;
//设置X轴的时间显示格式为7-10 11:20
xAxis.ValueFormatString = "hh:mm:ss";
//给图标添加Axis
chart.AxesX.Add(xAxis);
Axis yAxis = new Axis();
//设置图标中Y轴的最小值永远为0
yAxis.AxisMinimum = 0;
//设置图表中Y轴的后缀
yAxis.Suffix = rihgtStr;
chart.AxesY.Add(yAxis);
for (Int32 j = 0; j < 1; j++)
{
// 创建一个新的数据线。
DataSeries dataSeries = new DataSeries();
// 设置数据线的格式。
dataSeries.RenderAs = RenderAs.Line;
dataSeries.XValueType = ChartValueTypes.DateTime;
// 设置数据点
DataPoint dataPoint;
for (int i = 0; i < updateTime.Count; i++)
{
// 创建一个数据点的实例。
dataPoint = new DataPoint();
// 设置X轴点
dataPoint.XValue = updateTime[i];
//设置Y轴点
dataPoint.YValue = double.Parse(value[i]);
dataPoint.MarkerSize = 8;
dataPoint.Tag = tableName.Split('(')[0];
//设置数据点颜色
// dataPoint.Color = new SolidColorBrush(Colors.LightGray);
dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown);
//添加数据点
dataSeries.DataPoints.Add(dataPoint);
}
// 添加数据线到数据序列。
chart.Series.Add(dataSeries);
}
//将生产的图表增加到Grid,然后通过Grid添加到上层Grid.
Grid gr = new Grid();
gr.Children.Add(chart);
Grid.SetRow(gr, row);
Grid.SetColumn(gr, column);
gr.Margin = new Thickness(5);
gr.VerticalAlignment = VerticalAlignment.Top;
gr.HorizontalAlignment = HorizontalAlignment.Left;
//增加一个遮罩层到gr,将visifire的水印遮掉。
StackPanel sp = new StackPanel();
sp.Width = 160;
sp.Height = 18;
sp.Margin = new Thickness(0, 3, 6, 0);
sp.VerticalAlignment = VerticalAlignment.Top;
sp.HorizontalAlignment = HorizontalAlignment.Right;
sp.Background = new SolidColorBrush(Colors.White);
gr.Children.Add(sp);
LayoutRoot.Children.Add(gr);
}
通过此函数我们可以很方便的创建了一个Visifire图表,其创建的步骤那些我在这里不细说,大家直接看源码上的注释就可以了。因为我使用的Visifire是免费的版本,所有会有水印,在使用的过程中可以创建一个白色背景的StackPanel来遮盖住水印的位置。在这个函数执行的时候,还为每个DataPoint点加载了一个点击事件,处理当这些点被点击之后触发的事件(在事件里面获取DataPoint的X轴,Y轴等,以便进行相关操作),其源码如下:
void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DataPoint dp = sender as DataPoint;
MessageBox.Show(dp.YValue.ToString());
}
一个Visifire图表的组成如下图:
由上图我们可以看出一个Visifire图表由(Title,ChartGrid,Ticks,PlotArea,TrendLind,ToolTip,AxisLabels,Axis,DataSeries,DataPoint,Legend)组成。每个部分都是一个类,所以我们在使用Visifire过程中,如果有什么需要修改的地方,直接在后台创建图表的时候,修改相应的类就可以了。
本实例有VS2010+Silverlight 4.0编写,点击 SLVisifire.rar 下载实例源码。下面贴出本实例运行效果图: