随着物联网技术的发展，智能传感器在环境监测中的应用越来越广泛。通过实时数据采集与分析，环境监测系统能够帮助用户及时了解空气质量、温湿度等关键环境指标，进而采取有效措施进行调控。为了高效地展示这些传感器数据，开发者通常需要搭建一个直观且交互性强的用户界面。本文将结合 WPF 和 Chart.js 两种技术，讲解如何基于 C# 开发一个智能传感器数据分析平台，并通过图表实时展示环境监测数据。

---

一、前言

环境监测系统通常需要实时处理大量传感器数据，而有效的数据可视化不仅能够提升用户体验，还能让复杂的环境信息一目了然。WPF（Windows Presentation Foundation）作为 Windows 平台下的图形用户界面（GUI）框架，能够提供高性能的图形渲染和丰富的用户界面功能。而 Chart.js 则是一个轻量级且功能强大的 JavaScript 图表库，广泛应用于 Web 数据可视化领域。

在本文中，我们将使用 WPF 来构建智能传感器数据分析平台的前端界面，利用 Chart.js 来绘制动态图表，最终通过 C# 代码进行后台数据处理和传输。具体示例将以环境监测为案例，展示如何实时接收并展示来自传感器的数据。

---

二、项目需求分析

开发一个环境监测系统，首先需要定义系统的主要功能需求：

1. 传感器数据采集：实时从智能传感器中获取数据，传感器类型包括空气质量、温湿度等。
2. 数据展示与可视化：使用图表展示各类环境数据的实时变化，帮助用户直观理解环境状况。
3. 报警与数据记录：当环境数据超出设定的阈值时，系统能够发出报警，并记录历史数据。
4. 实时更新：通过 WebSocket 或 HTTP 接口，确保图表数据实时更新。

---

三、技术架构

为了实现这些功能，我们将采用以下技术架构：

• 前端：使用 WPF（C#）作为前端框架，负责展示界面和与用户交互。
• 图表库：采用 Chart.js，通过 WebView 控件集成到 WPF 中展示动态图表。
• 数据通信：利用 WebSocket 或 HTTP 接口接收智能传感器数据。
• 后端：C# 中的实时数据处理和更新机制。

---

四、实现步骤

1. 创建 WPF 项目

首先，使用 Visual Studio 创建一个新的 WPF 应用程序项目：

1. 打开 Visual Studio，选择 “创建新项目”。
2. 选择 “WPF 应用 (.NET Core)”，并命名为 SensorDataAnalysisPlatform。
3. 完成项目创建后，进入 MainWindow.xaml 文件，构建基础的界面。

2. 集成 Chart.js

为了将 Chart.js 集成到 WPF 中，我们需要使用一个 Web 浏览器控件（WebView）来加载 HTML 内容并展示图表。我们可以通过 WebView2 来实现。

安装 WebView2 NuGet 包：

在 Visual Studio 中，右键点击解决方案，选择 管理 NuGet 包，搜索并安装 Microsoft.Web.WebView2 包。

然后，在 MainWindow.xaml 中添加 WebView2 控件：

<Window x:Class="SensorDataAnalysisPlatform.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"
        mc:Ignorable="d"
        Title="环境监测平台" Height="450" Width="800">
    <Grid>
        <!-- WebView2 控件，用于显示 Chart.js 图表 -->
        <WebView2 Name="ChartWebView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    </Grid>
</Window>

3. 构建 HTML 与 JavaScript 图表页面

创建一个简单的 HTML 文件，用于绘制实时更新的 Chart.js 图表。保存为 chart.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传感器数据图表</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="sensorChart" width="400" height="200"></canvas>
    <script>
        var ctx = document.getElementById('sensorChart').getContext('2d');
        var sensorChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [], // 时间轴
                datasets: [{
                    label: '温度',
                    data: [], // 温度数据
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1
                }]
            },
            options: {
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom'
                    }
                }
            }
        });

        // 接收并更新图表数据
        function updateChart(time, temp) {
            if (sensorChart.data.labels.length > 10) {
                sensorChart.data.labels.shift();
                sensorChart.data.datasets[0].data.shift();
            }
            sensorChart.data.labels.push(time);
            sensorChart.data.datasets[0].data.push(temp);
            sensorChart.update();
        }
    </script>
</body>
</html>

这个 HTML 文件创建了一个简单的线性图表，使用 Chart.js 显示温度数据，并提供了 updateChart 函数来动态更新图表。

4. 在 WPF 中加载 HTML 文件

在 WPF 应用中加载并显示 chart.html，通过以下方式实现：

public MainWindow()
{
    InitializeComponent();

    // 加载 Chart.js 图表页面
    string htmlPath = "file:///C:/path/to/your/chart.html";
    ChartWebView.Source = new Uri(htmlPath);
}

5. 接收并更新传感器数据

接下来，利用 C# 中的 WebSocket 或 HTTP 客户端接收传感器的数据。假设我们使用 WebSocket 接收数据并更新图表。

首先，添加 WebSocket 客户端的支持：

dotnet add package WebSocketSharp

然后，在 MainWindow.xaml.cs 文件中实现 WebSocket 数据接收逻辑：

using WebSocketSharp;
using System;

public partial class MainWindow : Window
{
    private WebSocket ws;

    public MainWindow()
    {
        InitializeComponent();

        // 连接到 WebSocket 服务器，接收传感器数据
        ws = new WebSocket("ws://localhost:8080");
        ws.OnMessage += (sender, e) =>
        {
            // 解析收到的数据（假设数据格式为 {"time": "2025-12-01 10:00", "temperature": 25.6}）
            var data = JsonConvert.DeserializeObject<SensorData>(e.Data);
            UpdateChart(data.Time, data.Temperature);
        };
        ws.Connect();
    }

    private void UpdateChart(string time, double temperature)
    {
        // 调用 JavaScript 函数更新 Chart.js 图表
        ChartWebView.ExecuteScriptAsync($"updateChart('{time}', {temperature});");
    }

    public class SensorData
    {
        public string Time { get; set; }
        public double Temperature { get; set; }
    }
}

此代码会连接到一个 WebSocket 服务器，接收传感器数据并调用 JavaScript 函数 updateChart 更新图表。

6. 测试和优化

现在，启动你的 WPF 应用，确保 WebSocket 服务器正常工作并发送数据。你应该能够看到温度数据在 Chart.js 图表中实时更新。

---

五、总结

通过本文的介绍，你已经掌握了如何使用 WPF 和 Chart.js 开发一个智能传感器数据分析平台，具体通过以下技术实现：

• WPF：构建直观的用户界面。
• Chart.js：实现实时数据可视化。
• WebSocket：实现实时数据接收和处理。

这个平台不仅能够实时接收和展示环境监测数据，还能够通过图表直观展示温度、湿度等关键数据的变化趋势，为用户提供有价值的环境监测信息。

在实际开发中，你还可以根据需要对平台进行功能扩展，加入报警机制、历史数据查询等高级功能，从而为环境保护与监测提供更加全面的解决方案。