当前位置：首页 > news >正文

工控C#上位机之Chart控件：打造可视化界面的利器

news 2026/6/11 18:48:13

工控C#上位机-UI篇：chart控件一、UI篇-Chart控件实现柱状图、折线图、样条曲线、饼形图、圆环图、雷达图等； 1、Chart控件实现柱状图、折线图、样条曲线、饼形图、圆环图、雷达图等； 2、稍加修改即可实现精美画面，用于上位机界面及大屏信息化展示等； 3、所有功能源码加详细注释，全网最全； LiveChart2 Demo(winform/wpf/Maui/Xamarin/Blazor/Avalonia)071

在工业自动化领域，上位机界面的可视化设计是至关重要的一环。数据的直观展示不仅能让操作人员快速理解系统运行状态，还能帮助管理层做出更明智的决策。

今天，我们就来聊聊如何利用Chart控件在C#上位机程序中实现精美且功能丰富的数据可视化界面。

一、Chart控件的基本功能

Chart控件几乎是所有开发者实现数据可视化时的首选工具。它的优点很明显：

支持多种图表类型：柱状图、折线图、饼形图、雷达图、样条曲线等；
灵活可定制：只需稍加修改，就能满足不同场景下的需求；
跨平台支持：无论是WinForm、WPF，还是Maui、Xamarin、Blazor或Avalonia等框架，Chart控件都能轻松适配。

1. 实现柱状图

柱状图非常适合用于比较不同类别的数据。以下是一个简单的WinForm柱状图实现示例：

// 初始化Chart控件 var chart = new Chart(); chart.Width = 800; chart.Height = 600; // 添加数据系列 var series = new Series("Production"); series.ChartType = SeriesChartType.Column; series.Points.AddY(10); series.Points.AddY(5); series.Points.AddY(8); series.Points.AddY(6); chart.Series.Add(series); // 设置标题和轴标签 chart.Titles.Add("Production Statistics"); chart.ChartAreas[0].AxisX.Title = "Department"; chart.ChartAreas[0].AxisY.Title = "Output";

运行这段代码后，你会看到一个简单的柱状图，清晰地展示了各个部门的生产量。

2. 实现折线图

折线图在展示趋势变化时尤为强大。例如，可以用来跟踪设备的温度变化趋势：

var chart = new Chart(); chart.Width = 800; chart.Height = 600; var series = new Series("Temperature Trend"); series.ChartType = SeriesChartType.Line; series.Points.AddXY(1, 25); series.Points.AddXY(2, 30); series.Points.AddXY(3, 28); chart.Series.Add(series); chart.Titles.Add("Temperature Over Time"); chart.ChartAreas[0].AxisX.Title = "Time (hours)"; chart.ChartAreas[0].AxisY.Title = "Temperature (°C)";

通过调整折线的颜色、样式和数据点的显示方式，可以进一步提升图表的颜值。

3. 饼形图和圆环图

饼形图和圆环图非常适合展示数据的构成比例。例如，可以用来统计设备各部分的运行状态占比：

var chart = new Chart(); chart.Width = 800; chart.Height = 600; var series = new Series("Device Status"); series.ChartType = SeriesChartType.Pie; series.Points.AddXY("Running", 70); series.Points.AddXY("Idle", 20); series.Points.AddXY("Stopped", 10); chart.Series.Add(series); chart.Titles.Add("Device Status Overview");

如果想让饼形图更有高级感，可以将ChartType改为Doughnut，这样会生成一个圆环图。

二、为什么要选择Chart控件？

Chart控件的灵活性是其最大的优势。无论是简单的数据展示，还是复杂的多图表组合，它都能轻松应对。而且，通过调整颜色、字体和样式，可以快速实现符合工业界审美标准的界面。

举个例子，只需要在代码中添加几行样式设置，就能让图表变得赏心悦目：

// 调整图表外观 chart.BackColor = Color.FromArgb(240, 240, 240); chart.ChartAreas[0].BackColor = Color.White; chart.ChartAreas[0].BorderColor = Color.FromArgb(210, 210, 210);

经过这样的调整，图表看起来会更加简洁专业。