上一期我们实现了串口助手收发数据之后,这期我们为我们的串口助手加上我们的波形图功能。
我们在前面有一期中介绍如何在C#中使用chart画图库
本期我们利用我们上一期制作的串口助手来实现我们的串口示波器。
准备工作
首先我们在上一期的基础上加上我们的chart库
using System.Windows.Forms.DataVisualization.Charting;
其次,简单的布置一下我们的界面。

其中图表和按钮的默认状态是隐藏的,当我们勾选波形显示时显示。
private void ChartShow_CheckedChanged(object sender, EventArgs e)
{
if (ChartShow.Checked == true)
{
Receive.Height = 680/2;
chart.Show();
ClearChart.Show();
}
else
{
Receive.Height = 680;
chart.Hide();
ClearChart.Hide();
}
}
我们勾选按钮的时候,将接收区的高度减少一半,让按键和图表显形。
数据解析与存放
我们希望我们的数据格式是类似“a:xxx,b:xxx”等等。因此,我们需要解析我们的数据
private Dictionary ParseData(string input)
{
Dictionary
result = new Dictionary
();
// 按逗号分割字符串
string[] pairs = input.Split(',');
foreach (string pair in pairs)
{
// 再按冒号分割键值对
string[] keyValue = pair.Split(':');
if (keyValue.Length == 2)
{
string key = keyValue[0].Trim();
string value = keyValue[1].Trim();
result[key] = value;
}
}
return result;
}
我们定义一个解析键值对函数,利用逗号分隔字符串,冒号分隔将解析的结果返回,这样子我们就可以获取我们的键值对。
// 添加解析数据的代码
string[] lines = data.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries);
lines = lines.Skip(1).Take(lines.Length - 2).ToArray();
由于我们的数据可能有很多行,因此我们在更新图表的代码中需要将数据按照换行符分开,并且由于第一行和最后一行的数据可能不完整,我们需要删除第一行和最后一行的数据。
foreach (string line in lines)
{
// 对每一行进行解析
Dictionary parsedData = ParseData(line);
foreach (var kvp in parsedData)
{
// 继续处理解析后的数据
int existingIndex = chart.Series.IndexOf(kvp.Key);
if (existingIndex != -1)
{
//如果该系列的图表存在
chart.Series[existingIndex].Points.AddXY(chart.Series[existingIndex].Points.Count, double.Parse(kvp.Value));
}
else
{
//如果该系列的图表不存在
string seriesName = new string(kvp.Key.TakeWhile(char.IsLetter).ToArray()); // 获取字符串中的所有字母前缀
Series newSeries = new Series(seriesName);
newSeries.ChartType = SeriesChartType.Spline; // 设置图表类型为 Spline
newSeries.Points.AddXY(0, double.Parse(kvp.Value));
chart.Series.Add(newSeries);
}
}
}
我们将我们解析的数据放入图表,按照数据的前缀来划分数据。
判断图表是否存在,如果不存在就添加相应的系列。
效果展示
接着让我们看看效果
嘉立创PCB


登录 或 注册 后才可以进行评论哦!
还没有评论,抢个沙发!