C#基于ScottPlot进行可视化

邓钢

C#基于ScottPlot进行可视化

前言

上一篇文章跟大家分享了用NumSharp实现简单的线性回归，但是没有进行可视化，可能对拟合的过程没有直观的感受，因此今天跟大家介绍一下使用C#基于Scottplot进行可视化，当然Python的代码，我也会同步进行可视化。
Python代码进行可视化

Python代码用matplotlib做了可视化，我就不具体介绍了。
修改之后的python代码如下：

1. #The optimal values of m and b can be actually calculated with way less effort than doing a linear regression.
2. #this is just to demonstrate gradient descent
4. import numpy as np
5. import matplotlib.pyplot as plt
6. from matplotlib.animation import FuncAnimation
9. # y = mx + b
10. # m is slope, b is y-intercept
11. def compute_error_for_line_given_points(b, m, points):
12.     totalError = 0
13.     for i in range(0, len(points)):
14.         x = points[i, 0]
15.         y = points[i, 1]
16.         totalError += (y - (m * x + b)) ** 2
17.     return totalError / float(len(points))
19. def step_gradient(b_current, m_current, points, learningRate):
20.     b_gradient = 0
21.     m_gradient = 0
22.     N = float(len(points))
23.     for i in range(0, len(points)):
24.         x = points[i, 0]
25.         y = points[i, 1]
26.         b_gradient += -(2/N) * (y - ((m_current * x) + b_current))
27.         m_gradient += -(2/N) * x * (y - ((m_current * x) + b_current))
28.     new_b = b_current - (learningRate * b_gradient)
29.     new_m = m_current - (learningRate * m_gradient)
30.     return [new_b, new_m]
32. def gradient_descent_runner(points, starting_b, starting_m, learning_rate, num_iterations):
33.     b = starting_b
34.     m = starting_m
35.     args_data = []
36.     for i in range(num_iterations):
37.         b, m = step_gradient(b, m, np.array(points), learning_rate)
38.         args_data.append((b,m))
39.     return args_data
41. if __name__ == '__main__':
42.      points = np.genfromtxt("data.csv", delimiter=",")
43.      learning_rate = 0.0001
44.      initial_b = 0 # initial y-intercept guess
45.      initial_m = 0 # initial slope guess
46.      num_iterations = 10
47.      print ("Starting gradient descent at b = {0}, m = {1}, error = {2}".format(initial_b, initial_m, compute_error_for_line_given_points(initial_b, initial_m, points)))
48.      print ("Running...")
49.      args_data = gradient_descent_runner(points, initial_b, initial_m, learning_rate, num_iterations)
50.      
51.      b = args_data[-1][0]
52.      m = args_data[-1][1]
54.      print ("After {0} iterations b = {1}, m = {2}, error = {3}".format(num_iterations, b, m, compute_error_for_line_given_points(b, m, points)))
55.    
56.      data = np.array(points).reshape(100,2)
57.      x1 = data[:,0]
58.      y1 = data[:,1]
59.      
60.      x2 = np.linspace(20, 80, 100)
61.      y2 = initial_m * x2 + initial_b
63.      data2 = np.array(args_data)
64.      b_every = data2[:,0]
65.      m_every = data2[:,1]
67.      # 创建图形和轴
68.      fig, ax = plt.subplots()
69.      line1, = ax.plot(x1, y1, 'ro')
70.      line2, = ax.plot(x2,y2)
72.      # 添加标签和标题
73.      plt.xlabel('x')
74.      plt.ylabel('y')
75.      plt.title('Graph of y = mx + b')
77.      # 添加网格
78.      plt.grid(True)
80.     # 定义更新函数
81.      def update(frame):
82.         line2.set_ydata(m_every[frame] * x2 + b_every[frame])
83.         ax.set_title(f'{frame} Graph of y = {m_every[frame]:.2f}x + {b_every[frame]:.2f}')
84.    
85. # 创建动画
86. animation = FuncAnimation(fig, update, frames=len(data2), interval=500)
88. # 显示动画
89. plt.show()

复制代码

实现的效果如下所示：

C#代码进行可视化

这是本文重点介绍的内容，本文的C#代码通过Scottplot进行可视化。
Scottplot简介

ScottPlot 是一个免费的开源绘图库，用于 .NET，可以轻松以交互方式显示大型数据集。
控制台程序可视化

首先我先介绍一下在控制台程序中进行可视化。
首先添加Scottplot包：

将上篇文章中的C#代码修改如下：

1. using NumSharp;
3. namespace LinearRegressionDemo
4. {
5.     internal class Program
6.     {   
7.         static void Main(string[] args)
8.         {   
9.             //创建double类型的列表
10.             List<double> Array = new List<double>();
11.             List<double> ArgsList = new List<double>();
13.             // 指定CSV文件的路径
14.             string filePath = "你的data.csv路径";
16.             // 调用ReadCsv方法读取CSV文件数据
17.             Array = ReadCsv(filePath);
19.             var array = np.array(Array).reshape(100,2);
21.             double learning_rate = 0.0001;
22.             double initial_b = 0;
23.             double initial_m = 0;
24.             double num_iterations = 10;
26.             Console.WriteLine($"Starting gradient descent at b = {initial_b}, m = {initial_m}, error = {compute_error_for_line_given_points(initial_b, initial_m, array)}");
27.             Console.WriteLine("Running...");
28.             ArgsList = gradient_descent_runner(array, initial_b, initial_m, learning_rate, num_iterations);
29.             double b = ArgsList[ArgsList.Count - 2];
30.             double m = ArgsList[ArgsList.Count - 1];
31.             Console.WriteLine($"After {num_iterations} iterations b = {b}, m = {m}, error = {compute_error_for_line_given_points(b, m, array)}");
32.             Console.ReadLine();
34.             var x1 = array[$":", 0];
35.             var y1 = array[$":", 1];
36.             var y2 = m * x1 + b;
38.             ScottPlot.Plot myPlot = new(400, 300);
39.             myPlot.AddScatterPoints(x1.ToArray<double>(), y1.ToArray<double>(), markerSize: 5);
40.             myPlot.AddScatter(x1.ToArray<double>(), y2.ToArray<double>(), markerSize: 0);
41.             myPlot.Title($"y = {m:0.00}x + {b:0.00}");
43.             myPlot.SaveFig("图片.png");
44.       
45.         }
47.         static List<double> ReadCsv(string filePath)
48.         {
49.             List<double> array = new List<double>();
50.             try
51.             {
52.                 // 使用File.ReadAllLines读取CSV文件的所有行
53.                 string[] lines = File.ReadAllLines(filePath);            
55.                 // 遍历每一行数据
56.                 foreach (string line in lines)
57.                 {
58.                     // 使用逗号分隔符拆分每一行的数据
59.                     string[] values = line.Split(',');
61.                     // 打印每一行的数据
62.                     foreach (string value in values)
63.                     {
64.                         array.Add(Convert.ToDouble(value));
65.                     }                  
66.                 }
67.             }
68.             catch (Exception ex)
69.             {
70.                 Console.WriteLine("发生错误: " + ex.Message);
71.             }
72.             return array;
73.         }
75.         public static double compute_error_for_line_given_points(double b,double m,NDArray array)
76.         {
77.             double totalError = 0;
78.             for(int i = 0;i < array.shape[0];i++)
79.             {
80.                 double x = array[i, 0];
81.                 double y = array[i, 1];
82.                 totalError += Math.Pow((y - (m*x+b)),2);
83.             }
84.             return totalError / array.shape[0];
85.         }
87.         public static double[] step_gradient(double b_current,double m_current,NDArray array,double learningRate)
88.         {
89.             double[] args = new double[2];
90.             double b_gradient = 0;
91.             double m_gradient = 0;
92.             double N = array.shape[0];
94.             for (int i = 0; i < array.shape[0]; i++)
95.             {
96.                 double x = array[i, 0];
97.                 double y = array[i, 1];
98.                 b_gradient += -(2 / N) * (y - ((m_current * x) + b_current));
99.                 m_gradient += -(2 / N) * x * (y - ((m_current * x) + b_current));
100.             }
102.             double new_b = b_current - (learningRate * b_gradient);
103.             double new_m = m_current - (learningRate * m_gradient);
104.             args[0] = new_b;
105.             args[1] = new_m;
107.             return args;
108.         }
110.         public static List<double> gradient_descent_runner(NDArray array, double starting_b, double starting_m, double learningRate,double num_iterations)
111.         {
112.             double[] args = new double[2];
113.             List<double> argsList = new List<double>();
114.             args[0] = starting_b;
115.             args[1] = starting_m;
117.             for(int i = 0 ; i < num_iterations; i++)
118.             {
119.                 args = step_gradient(args[0], args[1], array, learningRate);
120.                 argsList.AddRange(args);
121.             }
123.             return argsList;
124.         }
127.     }
128. }

复制代码

然后得到的图片如下所示：

在以上代码中需要注意的地方：

1.   var x1 = array[$":", 0];
2.   var y1 = array[$":", 1];

复制代码

是在使用NumSharp中的切片，x1表示所有行的第一列，y1表示所有行的第二列。
当然我们不满足于只是保存图片，在控制台应用程序中，再添加一个 ScottPlot.WinForms包：

右键控制台项目选择属性，将目标OS改为Windows：

将上述代码中的

1.   myPlot.SaveFig("图片.png");

复制代码

修改为：

1. var viewer = new ScottPlot.FormsPlotViewer(myPlot);
2. viewer.ShowDialog();

复制代码

再次运行结果如下：

winform进行可视化

我也想像Python代码中那样画动图，因此做了个winform程序进行演示。
首先创建一个winform，添加ScottPlot.WinForms包，然后从工具箱中添加FormsPlot这个控件：

有两种方法实现，第一种方法用了定时器：

1. using NumSharp;
2. namespace WinFormDemo
3. {
4.     public partial class Form1 : Form
5.     {
6.         System.Windows.Forms.Timer updateTimer = new System.Windows.Forms.Timer();
7.         int num_iterations;
8.         int count = 0;
9.         NDArray? x1, y1, b_each, m_each;
10.         public Form1()
11.         {
12.             InitializeComponent();
13.         }
15.         private void button1_Click(object sender, EventArgs e)
16.         {
17.             StartLinearRegression();
18.         }
20.         public void StartLinearRegression()
21.         {
22.             //创建double类型的列表
23.             List<double> Array = new List<double>();
24.             List<double> ArgsList = new List<double>();
26.             // 指定CSV文件的路径
27.             string filePath = "你的data.csv路径";
29.             // 调用ReadCsv方法读取CSV文件数据
30.             Array = ReadCsv(filePath);
32.             var array = np.array(Array).reshape(100, 2);
34.             double learning_rate = 0.0001;
35.             double initial_b = 0;
36.             double initial_m = 0;
37.             num_iterations = 10;
39.             ArgsList = gradient_descent_runner(array, initial_b, initial_m, learning_rate, num_iterations);
41.             x1 = array[$":", 0];
42.             y1 = array[$":", 1];
44.             var argsArr = np.array(ArgsList).reshape(num_iterations, 2);
45.             b_each = argsArr[$":", 0];
46.             m_each = argsArr[$":", 1];
48.             double b = b_each[-1];
49.             double m = m_each[-1];
50.             var y2 = m * x1 + b;
52.             formsPlot1.Plot.AddScatterPoints(x1.ToArray<double>(), y1.ToArray<double>(), markerSize: 5);
53.             //formsPlot1.Plot.AddScatter(x1.ToArray<double>(), y2.ToArray<double>(), markerSize: 0);
54.             formsPlot1.Render();
57.         }
59.         static List<double> ReadCsv(string filePath)
60.         {
61.             List<double> array = new List<double>();
62.             try
63.             {
64.                 // 使用File.ReadAllLines读取CSV文件的所有行
65.                 string[] lines = File.ReadAllLines(filePath);
67.                 // 遍历每一行数据
68.                 foreach (string line in lines)
69.                 {
70.                     // 使用逗号分隔符拆分每一行的数据
71.                     string[] values = line.Split(',');
73.                     // 打印每一行的数据
74.                     foreach (string value in values)
75.                     {
76.                         array.Add(Convert.ToDouble(value));
77.                     }
78.                 }
79.             }
80.             catch (Exception ex)
81.             {
82.                 Console.WriteLine("发生错误: " + ex.Message);
83.             }
84.             return array;
85.         }
87.         public static double compute_error_for_line_given_points(double b, double m, NDArray array)
88.         {
89.             double totalError = 0;
90.             for (int i = 0; i < array.shape[0]; i++)
91.             {
92.                 double x = array[i, 0];
93.                 double y = array[i, 1];
94.                 totalError += Math.Pow((y - (m * x + b)), 2);
95.             }
96.             return totalError / array.shape[0];
97.         }
99.         public static double[] step_gradient(double b_current, double m_current, NDArray array, double learningRate)
100.         {
101.             double[] args = new double[2];
102.             double b_gradient = 0;
103.             double m_gradient = 0;
104.             double N = array.shape[0];
106.             for (int i = 0; i < array.shape[0]; i++)
107.             {
108.                 double x = array[i, 0];
109.                 double y = array[i, 1];
110.                 b_gradient += -(2 / N) * (y - ((m_current * x) + b_current));
111.                 m_gradient += -(2 / N) * x * (y - ((m_current * x) + b_current));
112.             }
114.             double new_b = b_current - (learningRate * b_gradient);
115.             double new_m = m_current - (learningRate * m_gradient);
116.             args[0] = new_b;
117.             args[1] = new_m;
119.             return args;
120.         }
122.         public static List<double> gradient_descent_runner(NDArray array, double starting_b, double starting_m, double learningRate, double num_iterations)
123.         {
124.             double[] args = new double[2];
125.             List<double> argsList = new List<double>();
126.             args[0] = starting_b;
127.             args[1] = starting_m;
129.             for (int i = 0; i < num_iterations; i++)
130.             {
131.                 args = step_gradient(args[0], args[1], array, learningRate);
132.                 argsList.AddRange(args);
133.             }
135.             return argsList;
136.         }
138.         private void button2_Click(object sender, EventArgs e)
139.         {
140.             // 初始化定时器
141.             updateTimer.Interval = 1000; // 设置定时器触发间隔（毫秒）
142.             updateTimer.Tick += UpdateTimer_Tick;
143.             updateTimer.Start();
144.         }
146.         private void UpdateTimer_Tick(object? sender, EventArgs e)
147.         {
148.             if (count >= num_iterations)
149.             {
150.                 updateTimer.Stop();
151.             }
152.             else
153.             {
154.                 UpdatePlot(count);
155.             }
157.             count++;
158.         }
160.         public void UpdatePlot(int count)
161.         {
163.             double b = b_each?[count];
164.             double m = m_each?[count];
166.             var y2 = m * x1 + b;
168.             formsPlot1.Plot.Clear();
169.             formsPlot1.Plot.AddScatterPoints(x1?.ToArray<double>(), y1?.ToArray<double>(), markerSize: 5);
170.             formsPlot1.Plot.AddScatter(x1?.ToArray<double>(), y2.ToArray<double>(), markerSize: 0);
171.             formsPlot1.Plot.Title($"第{count + 1}次迭代：y = {m:0.00}x + {b:0.00}");
172.             formsPlot1.Render();
173.         }
175.         private void button3_Click(object sender, EventArgs e)
176.         {
177.             updateTimer.Stop();
178.         }
180.         private void Form1_Load(object sender, EventArgs e)
181.         {
183.         }
184.     }
185. }

复制代码

简单介绍一下思路，首先创建List argsList用来保存每次迭代生成的参数b、m，然后用

1.            var argsArr = np.array(ArgsList).reshape(num_iterations, 2);  

复制代码

将argsList通过np.array()方法转化为NDArray，然后再调用reshape方法，转化成行数等于迭代次数，列数为2，即每一行对应一组参数值b、m。

1.             b_each = argsArr[$":", 0];
2.             m_each = argsArr[$":", 1];

复制代码

argsArr[$":", 0]表示每一行中第一列的值，也就是每一个b，argsArr[$":", 1]表示每一行中第二列的值。

1.             double b = b_each[-1];
2.             double m = m_each[-1];

复制代码

b_each[-1]用了NumSharp的功能表示b_each最后一个元素。
实现效果如下所示：

另一种方法可以通过异步实现：

1. using NumSharp;namespace WinFormDemo{    public partial class Form2 : Form    {              int num_iterations;        NDArray? x1, y1, b_each, m_each;        public Form2()        {            InitializeComponent();        }        private void button1_Click(object sender, EventArgs e)        {            StartLinearRegression();        }        public void StartLinearRegression()        {            //创建double类型的列表            List Array = new List();            List ArgsList = new List();            // 指定CSV文件的路径            string filePath = "你的data.csv路径";            // 调用ReadCsv方法读取CSV文件数据            Array = ReadCsv(filePath);            var array = np.array(Array).reshape(100, 2);            double learning_rate = 0.0001;            double initial_b = 0;            double initial_m = 0;            num_iterations = 10;            ArgsList = gradient_descent_runner(array, initial_b, initial_m, learning_rate, num_iterations);            x1 = array[$":", 0];            y1 = array[$":", 1];            var argsArr = np.array(ArgsList).reshape(num_iterations, 2);            b_each = argsArr[$":", 0];
2.             m_each = argsArr[$":", 1];            double b = b_each[-1];
3.             double m = m_each[-1];            var y2 = m * x1 + b;            formsPlot1.Plot.AddScatterPoints(x1.ToArray(), y1.ToArray(), markerSize: 5);                  formsPlot1.Render();        }        static List ReadCsv(string filePath)        {            List array = new List();            try            {                // 使用File.ReadAllLines读取CSV文件的所有行                string[] lines = File.ReadAllLines(filePath);                // 遍历每一行数据                foreach (string line in lines)                {                    // 使用逗号分隔符拆分每一行的数据                    string[] values = line.Split(',');                    // 打印每一行的数据                    foreach (string value in values)                    {                        array.Add(Convert.ToDouble(value));                    }                }            }            catch (Exception ex)            {                Console.WriteLine("发生错误: " + ex.Message);            }            return array;        }        public static double compute_error_for_line_given_points(double b, double m, NDArray array)        {            double totalError = 0;            for (int i = 0; i < array.shape[0]; i++)            {                double x = array[i, 0];                double y = array[i, 1];                totalError += Math.Pow((y - (m * x + b)), 2);            }            return totalError / array.shape[0];        }        public static double[] step_gradient(double b_current, double m_current, NDArray array, double learningRate)        {            double[] args = new double[2];            double b_gradient = 0;            double m_gradient = 0;            double N = array.shape[0];            for (int i = 0; i < array.shape[0]; i++)            {                double x = array[i, 0];                double y = array[i, 1];                b_gradient += -(2 / N) * (y - ((m_current * x) + b_current));                m_gradient += -(2 / N) * x * (y - ((m_current * x) + b_current));            }            double new_b = b_current - (learningRate * b_gradient);            double new_m = m_current - (learningRate * m_gradient);            args[0] = new_b;            args[1] = new_m;            return args;        }        public static List gradient_descent_runner(NDArray array, double starting_b, double starting_m, double learningRate, double num_iterations)        {            double[] args = new double[2];            List argsList = new List();            args[0] = starting_b;            args[1] = starting_m;            for (int i = 0; i < num_iterations; i++)            {                args = step_gradient(args[0], args[1], array, learningRate);                argsList.AddRange(args);            }            return argsList;        }        private void Form2_Load(object sender, EventArgs e)        {        }        public async Task UpdateGraph()
4.         {
5.             for (int i = 0; i < num_iterations; i++)
6.             {
7.                 double b = b_each?[i];
8.                 double m = m_each?[i];
9.                 var y2 = m * x1 + b;
11.                 formsPlot1.Plot.Clear();
12.                 formsPlot1.Plot.AddScatterPoints(x1?.ToArray<double>(), y1?.ToArray<double>(), markerSize: 5);
13.                 formsPlot1.Plot.AddScatter(x1?.ToArray<double>(), y2.ToArray<double>(), markerSize: 0);
14.                 formsPlot1.Plot.Title($"第{i + 1}次迭代：y = {m:0.00}x + {b:0.00}");
15.                 formsPlot1.Render();
16.            
17.                 await Task.Delay(1000);
18.             }        }        private async void button2_Click(object sender, EventArgs e)
19.         {
20.             await UpdateGraph();
21.         }    }}

复制代码

点击更新按钮开始执行异步任务：

1. private async void button2_Click(object sender, EventArgs e)
2.         {
3.             await UpdateGraph();
4.         }

复制代码

1. public async Task UpdateGraph()
2.         {
3.             for (int i = 0; i < num_iterations; i++)
4.             {
5.                 double b = b_each?[i];
6.                 double m = m_each?[i];
7.                 var y2 = m * x1 + b;
9.                 formsPlot1.Plot.Clear();
10.                 formsPlot1.Plot.AddScatterPoints(x1?.ToArray<double>(), y1?.ToArray<double>(), markerSize: 5);
11.                 formsPlot1.Plot.AddScatter(x1?.ToArray<double>(), y2.ToArray<double>(), markerSize: 0);
12.                 formsPlot1.Plot.Title($"第{i + 1}次迭代：y = {m:0.00}x + {b:0.00}");
13.                 formsPlot1.Render();
14.            
15.                 await Task.Delay(1000);
16.             }

复制代码

实现效果如下：

总结

本文以一个控制台应用与一个winform程序为例向大家介绍了C#如何基于ScottPlot进行数据可视化，并介绍了实现动态绘图的两种方式，一种是使用定时器，另一种是使用异步操作，希望对你有所帮助。

来源:https://www.cnblogs.com/mingupupu/Undeclared/17963079
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！