上一期我们实现了串口助手收发数据之后，这期我们为我们的串口助手加上我们的波形图功能。
我们在前面有一期中介绍如何在 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<string, string> ParseData(string input) { Dictionary<string, string> result = new Dictionary<string, string>(); // 按逗号分割字符串 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<string, string> 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); } }}
我们将我们解析的数据放入图表，按照数据的前缀来划分数据。
判断图表是否存在，如果不存在就添加相应的系列。
** 效果展示 ** 接着让我们看看效果