提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|其它|编辑:郝浩|2012-02-20 00:23:26.000|阅读 2162 次
概述:Visifire是由visifire公司开发的一款WPF&Silverlight图表控件,可全面应用于WEB、桌面和移动应用程序,支持图表仪表所有的属性实时更新。本文我们将学习如何使用Visifire图表创建一个实时更新的示例。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
Visifire是由visifire公司开发的一款WPF&Silverlight图表控件,可全面应用于WEB、桌面和移动应用程序,支持图表仪表所有的属性实时更新。本文我们将学习如何使用Visifire图表创建一个实时更新的示例。
注意:请确保你已经下载了visifire并获取了visifire程序集。
Step1:
打开Page.xaml文件。Page.xaml文件的默认内容如下所示:
<UserControl x:Class="SilverlightApplication3.Page"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
接下来,在网格内创建2个名为 ChartGrid1 和ChartGrid2的网格,并将其置于父网格内,如图所示(蓝色突出部分):
<UserControl x:Class="Sample1.Page"
xmlns="//schemas.microsoft.com/client/2007"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid x:Name="ChartGrid1" Width="70" Height="120" Grid.Column="0"/>
<Grid x:Name="ChartGrid2" Width="200" Height="120" Grid.Column="1"/>
</Grid>
</UserControl>
Step 2:
我们将在网格中创建2个图表:ChartGrid1和ChartGrid2。打开隐藏文件Page.xaml.cs的代码,确保已定义如下的命名空间:
using Visifire.Charts;
using Visifire.Commons;
Step 3:
创建InitializeData()函数,从构造函数中调用该函数,如下所示:
public Page()
{
InitializeComponent();
InitializeData();
}
private void InitializeData()
{
CreateColumnChart();
CreateLineChart();
}
Step 4:
声明全部变量chart1和chart2。
Chart _chart1;
Chart _chart2;
Double[] _data = new Double[20];
Page.xaml.cs中的代码如图所示:
Step 5:
在InitializeData()函数中调用下列2个函数CreateColumnChart()和CreateLineChart(),如图所示:
private void CreateColumnChart()
{
_chart1 = new Chart();
_chart1.Width = 70;
_chart1.Height = 120;
_chart1.AnimationEnabled = false;
_chart1.Watermark = false;
_chart1.Background = new SolidColorBrush(Colors.Black);
Axis axisX = new Axis();
axisX.Enabled = false;
_chart1.AxesX.Add(axisX);
Axis axisY = new Axis();
axisY.Enabled = false
ChartGrid grid = new ChartGrid();
grid.Enabled = false;
axisY.Grids.Add(grid);
_chart1.AxesY.Add(axisY);
Title title = new Title();
title.VerticalAlignment = VerticalAlignment.Bottom;
title.FontColor = new SolidColorBrush(Colors.White);
_chart1.Titles.Add(title);
_chart1.Series.Add(new DataSeries() { RenderAs = RenderAs.Column });
_chart1.Series[0].Color = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0xff, (Byte)0x00));
_chart1.Series[0].DataPoints.Add(new DataPoint());
ChartGrid1.Children.Add(_chart1);
}
在上面的代码中,我们需要创建6个对象,Chart, Axis, ChartGrid, Title, DataSeries, DataPoint。DataSeries应添加到图表系列集合;Axis应被添加到图表的AxesX 和AxesY集合;ChartGrid应被添加到Axis的网格集合;Title应被添加到图表的Title集合;DataPoint 应被添加到DataSeries的DataPoints集合;最后,将chart1 添加到ChartGrid1中。
Page.xaml.cs文件中的代码如下:
现在,添加CreateLineChart()函数,代码如下:
private void CreateLineChart()
{
_chart2 = new Chart();
_chart2.Width = 200;
_chart2.Height = 120;
_chart2.AnimationEnabled = false;
_chart2.ScrollingEnabled = false;
_chart2.Watermark = false;
_chart2.Background = new SolidColorBrush(Colors.Black);
Axis axisX = new Axis();
axisX.AxisLabels = new AxisLabels();
axisX.AxisLabels.Enabled = false;
ChartGrid gridX = new ChartGrid();
gridX.LineColor = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0x80, (Byte)0x40));
gridX.LineThickness = 1;
axisX.Grids.Add(gridX);
Ticks tickX = new Ticks();
tickX.Enabled = false;
axisX.Ticks.Add(tickX);
_chart2.AxesX.Add(axisX);
Axis axisY = new Axis();
axisY.AxisMinimum = -100;
axisY.AxisMaximum = 100;
axisY.AxisLabels = new AxisLabels();
axisY.AxisLabels.Enabled = false;
ChartGrid gridY = new ChartGrid();
gridY.LineColor = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0x80, (Byte)0x40));
gridY.LineThickness = 1;
axisY.Grids.Add(gridY);
Ticks tickY = new Ticks();
tickY.Enabled = false;
axisY.Ticks.Add(tickY);
_chart2.AxesY.Add(axisY);
_chart2.Series.Add(new DataSeries() { RenderAs = RenderAs.Line });
_chart2.Series[0].Color = new SolidColorBrush(Color.FromArgb((Byte)0xff, (Byte)0x00,(Byte)0xff, (Byte)0x00));
for (Int32 i = 0; i < _data.Length; i++)
_chart2.Series[0].DataPoints.Add(new DataPoint());
ChartGrid2.Children.Add(_chart2);
}
在上面的代码中,我们需要创建6个对象,Chart, Axis, ChartGrid, Title, DataSeries, DataPoint。DataSeries应添加到图表系列集合;Axis应被添加到图表的AxesX 和AxesY集合;ChartGrid应被添加到Axis的网格集合;Title应被添加到图表的Title集合;DataPoint 应被添加到DataSeries的DataPoints集合;最后,将chart2 添加到ChartGrid2中。
在CreateColumnChart()函数下面添加CreateLineChart()函数后,代码如下图所示:
Step 6:
创建一个 DispatcherTimer实例,取名为timer。
System.Windows.Threading.DispatcherTimer _timer = new System.Windows.Threading.DispatcherTimer();
在添加DispatcherTimer后,Page.xaml.cs文件如下所示:
Step 7:
在页面构造函数中附上timer的tick事件处理器,
public Page()
{
InitializeComponent();
InitializeData();
_timer.Tick += new EventHandler(_timer_Tick);
_timer.Interval = TimeSpan.FromSeconds(1);
LayoutRoot.Loaded += new RoutedEventHandler(LayoutRoot_Loaded);
}
在上面的构造函数中,我们给timer对象的时间间隔定为1秒,意味着图表每一秒都会进行更新。我们为LayoutRoot的 Loaded事件附上了更多的时间处理器。
Step 8:
在LayoutRoot的Loaded事件的事件处理器中启动timer。
void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
_timer.Start();
}
添加上面的代码后,Page.xaml.cs文件的代码如图所示:
Step 9:
现在,声明Boolean类型全局变量oddState,可检查正值和负值。
Boolean _oddState = false;
创建一个的UpdateData()函数
private Double[] UpdateData()
{
Random rand = new Random();
Int32 i;
for (i = 0; i < _data.Length-1; i++)
{
_data[i] = _data[i + 1];
}
if (!_oddState)
{
_oddState = true;
_data[i] = rand.Next(0, 100);
}
else
{
_oddState = false;
_data[i] = -_data[i];
}
return _data;
}
添加上面的代码后,Page.xaml.cs 如图所示:
Step 10:
void _timer_Tick(object sender, EventArgs e)
{
UpdateData();
for (Int32 i = 0; i < _data.Length; i++)
{
_chart2.Series[0].DataPoints[i].YValue = _data[i];
}
_chart1.Series[0].DataPoints[0].YValue = Math.Abs(_data[_data.Length - 1]);
_chart1.Titles[0].Text = Convert.ToString(Math.Abs(_data[_data.Length - 1]))+ "%";
}
首先调用UpdateData() 函数,然后创建一个循环。在循环中,将数组值分配到第二个图表系列的DataPoint YValues中。一旦循环完成,我们分配数组的最后一个值到第一个系列的DataPoint YValue中。相同的值被作为图表的标题文本显示出来。
添加代码后的Page.xaml.cs文件如图所示:
记载完后,图表便显示出来了。
现在,运行图表应用程序并查看输出,如下截图:
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自:慧都控件网面对“数字中国”建设和中国制造2025战略实施的机遇期,中车信息公司紧跟时代的步伐,以“集约化、专业化、标准化、精益化、一体化、平台化”为工作目标,大力推进信息服务、工业软件等核心产品及业务的发展。在慧都3D解决方案的实施下,清软英泰建成了多模型来源的综合轻量化显示平台、实现文件不失真的百倍压缩比、针对模型中的大模型文件,在展示平台上进行流畅展示,提升工作效率,优化了使用体验。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
本站的模型资源均免费下载,登录后即可下载。模型仅供学习交流,勿做商业用途。
Visifire Silverlight是基于Silverlight的数据可视化控件套包
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢