Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)

    在实际项目开展中,往往会牵扯到需要绘制图表的情况。而Visifire是一个比较美观大方的第三方图表控件,本文会讲述如何初步使用Visifire控件。

        首先我们需要从Visifire的官方网站下载:http://www.visifire.com/,新建一个项目,引入SLVisifire.Charts.dll。在MainPage.xaml.cs代码中添加代码:using Visifire.Charts;

        准备工作做好了,此时我在这里直接编写了一个函数如下:

 


  1. /// <summary> 
  2.      /// 创建一个图表 
  3.      /// </summary> 
  4.      /// <param name="tableName">表名字</param> 
  5.      /// <param name="updateTime">时间段的集合</param> 
  6.      /// <param name="value">对应时间段集合的值</param> 
  7.      /// <param name="row">本表在主Grid里面的ROW值</param> 
  8.      /// <param name="column">本表在主Grid里面的column值</param> 
  9.      /// <param name="rihgtStr">Y轴的后缀</param> 
  10.      /// <param name="tspan">时间段间隔</param> 
  11.      /// <param name="chartInterval">图表两点之间的间隔</param> 
  12.      /// <param name="intervaltype">图表的X轴坐标按什么来分类,如时分秒</param> 
  13.      public void CreateChart(string tableName, List<DateTime> updateTime, List<string> value, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype) 
  14.      { 
  15.          // 创建一个图标 
  16.          Chart chart = new Chart(); 
  17.  
  18.          // 设置图标的宽度和高度 
  19.          chart.Width = 500; 
  20.          chart.Height = 400; 
  21.          chart.ToolBarEnabled = true
  22.  
  23.          // 设置图标的属性 
  24.          chart.ScrollingEnabled = false
  25.          chart.View3D = true
  26.  
  27.          // 创建一个标题的对象 
  28.          Title title = new Title(); 
  29.  
  30.          // 设置标题的名称 
  31.          title.Text = tableName; 
  32.          title.Padding = new Thickness(0, 10, 5, 0); 
  33.  
  34.          // 向图标添加标题 
  35.          chart.Titles.Add(title); 
  36.  
  37.          // 初始化一个新的Axis 
  38.          Axis xAxis = new Axis(); 
  39.  
  40.          // 设置axis的属性 
  41.          //图表的X轴坐标按什么来分类,如时分秒 
  42.          xAxis.IntervalType = intervaltype; 
  43.          //图表中的X轴坐标间隔如2,3,20等,单位为xAxis.IntervalType设置的时分秒。 
  44.          xAxis.Interval = chartInterval; 
  45.          //设置X轴的时间显示格式为7-10 11:20 
  46.          xAxis.ValueFormatString = "hh:mm:ss"
  47.          //给图标添加Axis 
  48.          chart.AxesX.Add(xAxis); 
  49.          Axis yAxis = new Axis(); 
  50.          //设置图标中Y轴的最小值永远为0 
  51.          yAxis.AxisMinimum = 0; 
  52.          //设置图表中Y轴的后缀 
  53.          yAxis.Suffix = rihgtStr; 
  54.          chart.AxesY.Add(yAxis); 
  55.          for (Int32 j = 0; j < 1; j++) 
  56.          { 
  57.              // 创建一个新的数据线。 
  58.              DataSeries dataSeries = new DataSeries(); 
  59.  
  60.              // 设置数据线的格式。 
  61.              dataSeries.RenderAs = RenderAs.Line; 
  62.              dataSeries.XValueType = ChartValueTypes.DateTime; 
  63.              // 设置数据点 
  64.              DataPoint dataPoint; 
  65.  
  66.              for (int i = 0; i < updateTime.Count; i++) 
  67.              { 
  68.                  // 创建一个数据点的实例。 
  69.                  dataPoint = new DataPoint(); 
  70.  
  71.                  // 设置X轴点 
  72.                  dataPoint.XValue = updateTime[i]; 
  73.  
  74.                  //设置Y轴点 
  75.                  dataPoint.YValue = double.Parse(value[i]); 
  76.                  dataPoint.MarkerSize = 8; 
  77.                  dataPoint.Tag = tableName.Split('(')[0]; 
  78.                  //设置数据点颜色 
  79.                 // dataPoint.Color = new SolidColorBrush(Colors.LightGray); 
  80.                  dataPoint.MouseLeftButtonDown += new MouseButtonEventHandler(dataPoint_MouseLeftButtonDown); 
  81.  
  82.                  //添加数据点 
  83.                  dataSeries.DataPoints.Add(dataPoint); 
  84.              } 
  85.  
  86.              // 添加数据线到数据序列。 
  87.              chart.Series.Add(dataSeries); 
  88.          } 
  89.  
  90.          //将生产的图表增加到Grid,然后通过Grid添加到上层Grid. 
  91.          Grid gr = new Grid(); 
  92.          gr.Children.Add(chart); 
  93.          Grid.SetRow(gr, row); 
  94.          Grid.SetColumn(gr, column); 
  95.          gr.Margin = new Thickness(5); 
  96.          gr.VerticalAlignment = VerticalAlignment.Top
  97.          gr.HorizontalAlignment = HorizontalAlignment.Left
  98.          //增加一个遮罩层到gr,将visifire的水印遮掉。 
  99.          StackPanel sp = new StackPanel(); 
  100.          sp.Width = 160; 
  101.          sp.Height = 18; 
  102.          sp.Margin = new Thickness(0, 3, 6, 0); 
  103.          sp.VerticalAlignment = VerticalAlignment.Top
  104.          sp.HorizontalAlignment = HorizontalAlignment.Right
  105.          sp.Background = new SolidColorBrush(Colors.White); 
  106.          gr.Children.Add(sp); 
  107.  
  108.          LayoutRoot.Children.Add(gr); 
  109.      } 

        通过此函数我们可以很方便的创建了一个Visifire图表,其创建的步骤那些我在这里不细说,大家直接看源码上的注释就可以了。因为我使用的 Visifire是免费的版本,所有会有水印,在使用的过程中可以创建一个白色背景的StackPanel来遮盖住水印的位置。在这个函数执行的时候,还 为每个DataPoint点加载了一个点击事件,处理当这些点被点击之后触发的事件(在事件里面获取DataPoint的X轴,Y轴等,以便进行相关操 作),其源码如下:


  1. void dataPoint_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
  2. DataPoint dp = sender as DataPoint; 
  3. MessageBox.Show(dp.YValue.ToString()); 
  4.  
  5. 复制代码 
  6.  
  7.         最后我们模拟一个内存使用率的图标,设置了8个时间点的8个内存使用值的初始值。在MainPage.xaml.cs的主函数中我们编写以下代码: 
  8.  
  9. public MainPage() 
  10. InitializeComponent(); 
  11. //模拟的8个时间点 
  12. List<DateTime> DTimeList = new List<DateTime>() 
  13. new DateTime(2010,2,15,7,11,03), 
  14. new DateTime(2010,2,15,7,12,03), 
  15. new DateTime(2010,2,15,7,13,03), 
  16. new DateTime(2010,2,15,7,14,03), 
  17. new DateTime(2010,2,15,7,15,03), 
  18. new DateTime(2010,2,15,7,16,03), 
  19. new DateTime(2010,2,15,7,17,03), 
  20. new DateTime(2010,2,15,7,18,03) 
  21. }; 
  22. //模拟的8个内存使用率值 
  23. List<string> strList = new List<string>() { "20""55""40""70""57""12""49""60" }; 
  24. //按照1分钟的间隔来显示X轴坐标之间的数字。每隔20秒为一个单位长度,Y轴值的后缀为"%" 
  25. CreateChart("内存使用率", DTimeList, strList, 0, 0, "%", new TimeSpan(0,0,20) , 1, IntervalTypes.Minutes); 

        一个Visifire图表的组成如下图:

Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)

         由上图我们可以看出一个Visifire图表由 (Title,ChartGrid,Ticks,PlotArea,TrendLind,ToolTip,AxisLabels,Axis,DataSeries,DataPoint,Legend) 组成。每个部分都是一个类,所以我们在使用Visifire过程中,如果有什么需要修改的地方,直接在后台创建图表的时候,修改相应的类就可以了。

        本实例有VS2010+Silverlight 4.0编写,点击 SLVisifire.rar 下载实例源码。下面贴出本实例运行效果图:

Silverlight实用窍门系列:14.Visifire图表控件的使用一(图表的创建和基础使用)



本文转自程兴亮 51CTO博客,原文链接:http://blog.51cto.com/chengxingliang/821499
上一篇:Python之图表、二维码生成


下一篇:推荐十大优化页面加载速度的方法