大家好，又见面了，我是你们的朋友全栈君。
kagula
2019-3-18
这里用源代码的形式，示范如何画出一个最简单的动态曲线图。
开发环境，Visual studio 2017 Community Update5
项目类型: WPF C# .NetFramework 4.6.1
本文适用对象： 有两年没有开发C# WPF的程序员， 通过这个示例可以快速回忆。
下面是运行效果图，不停显示最新生成的十个数据点。
让程序跑起来分三步
第一步
新建WPF项目， 添加Reference, WPFVisifire.Charts.dll
第二步
修改xaml， 修改后的内容如下
代码语言：javascript复制<Window x:Class="testVisifire.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts"
xmlns:local="clr-namespace:testVisifire"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<vc:Chart Name="chart" DockPanel.Dock="Left" Margin="6" />
</Grid>
</Window>第三步
代码语言：javascript复制using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Visifire.Charts;
namespace testVisifire
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
System.Timers.Timer _timer;
Random _random = new Random();
public MainWindow()
{
InitializeComponent();
initChart();
addData2Chart();
initTimer();
_timer.Start();
}
private void initChart()
{
// 创建一个标题的对象
Title title = new Title();
// 设置标题的名称
title.Text = "abc";
title.Padding = new Thickness(0, 10, 5, 0);
// 向图标添加标题
chart.Titles.Add(title);
// 初始化一个新的Axis
Axis xAxis = new Axis();
// 设置axis的属性
//图表的X轴坐标按什么来分类，如时分秒
xAxis.IntervalType = IntervalTypes.Seconds;
//图表中的X轴坐标间隔如2，3，20等，单位为xAxis.IntervalType设置的时分秒。
xAxis.Interval = 1;
//设置X轴的时间显示格式为7-10 11：20
xAxis.ValueFormatString = "hh:mm:ss";
//给图标添加Axis
chart.AxesX.Add(xAxis);
Axis yAxis = new Axis();
//设置图标中Y轴的最小值永远为0
yAxis.AxisMinimum = 0;
yAxis.AxisMaximum = 64;
//设置图表中Y轴的后缀
yAxis.Suffix = "";
chart.AxesY.Add(yAxis);
}
private void addData2Chart()
{
// 创建一个新的数据线。
DataSeries dataSeries = new DataSeries();
// 设置数据线的格式。
dataSeries.RenderAs = RenderAs.Line;
dataSeries.XValueType = ChartValueTypes.DateTime;
/*
for (int i = 0; i < 32; i )
{
// 设置数据点
DataPoint dataPoint;
// 创建一个数据点的实例。
dataPoint = new DataPoint();
// 设置X轴点
DateTime dt = DateTime.Now;
dataPoint.XValue = dt.AddSeconds(i);
//设置Y轴点
dataPoint.YValue = i;
dataPoint.MarkerSize = 8;
dataPoint.Tag = "bbb";
//设置数据点颜色
dataPoint.Color = new SolidColorBrush(Colors.LightGray);
//添加数据点
dataSeries.DataPoints.Add(dataPoint);
//测试删除前面的点
if(dataSeries.DataPoints.Count>10)
{
dataSeries.DataPoints.RemoveAt(0);
}
}
*/
// 添加数据线到数据序列。
chart.Series.Add(dataSeries);
}
private void initTimer()
{
_timer = new System.Timers.Timer(1000);
//实例化Timer类，设置间隔时间为10000毫秒；
_timer.Elapsed = new System.Timers.ElapsedEventHandler(onTimer);
//到达时间的时候执行事件；
}
public void onTimer(object source, System.Timers.ElapsedEventArgs e)
{
this.Dispatcher.Invoke(new Action(() => {
try
{
DataSeries ds = chart.Series[0];
DataPoint dataPoint = new DataPoint();
// 设置X轴点
DateTime dt = DateTime.Now;
dataPoint.XValue = dt.AddSeconds(10);
//设置Y轴点
dataPoint.YValue = _random.Next(1,32);
dataPoint.MarkerSize = 8;
//设置数据点颜色
dataPoint.Color = new SolidColorBrush(Colors.LightGray);
//添加数据点
ds.DataPoints.Add(dataPoint);
//测试删除前面的点
if (ds.DataPoints.Count > 10)
{
ds.DataPoints.RemoveAt(0);
}
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex.Message);
}
}));
}
}
}最后F5就可以运行了。
注意:
[1]如果要让控件自动适应窗口大小建议外面一层用Grid，里面再套StackPanel.
[2]在xaml中等布局好后，最后放visifire， 因为放了visifire，图形编辑环境就不能render了，等有时间，研究下如何解决这个问题。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/162803.html原文链接：https://javaforall.cn
