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

【实时Linux实战系列】实时数据可视化技术实现

news 2025/8/30 9:47:34

在当今数据驱动的世界中，实时数据可视化已成为理解和利用实时信息的关键工具。无论是在金融交易监控、工业生产监控、智能交通管理还是物联网设备监控中，能够将复杂的数据以直观的图表形式展示出来，对于快速决策和问题解决至关重要。实时数据可视化不仅能够帮助用户快速识别数据中的趋势和异常，还能提高系统的透明度和可操作性。

对于开发者来说，掌握实时数据可视化的技能可以显著提升他们在数据分析、系统监控和用户界面设计领域的专业能力。这不仅能为他们打开进入大数据、物联网和智能系统开发领域的大门，还能帮助他们在现有项目中实现更高效的数据驱动决策支持系统。

核心概念

实时任务的特性

实时任务是指那些对时间敏感的任务，它们需要在规定的时间内完成。在实时数据可视化中，实时任务通常包括数据的采集、处理和渲染。这些任务需要满足以下特性：

时间约束性：任务必须在指定的时间内完成，否则可能会影响系统的整体性能。
确定性：任务的执行时间是可预测的，这对于保证系统稳定运行至关重要。
优先级：实时任务通常具有不同的优先级，高优先级的任务会优先执行。

环境准备

软硬件环境

操作系统：Ubuntu 20.04 LTS（推荐使用64位版本）
开发工具：GCC（GNU Compiler Collection）版本9.3.0或更高，Node.js版本14.x或更高
其他工具：D3.js、Grafana、WebSocket库、MySQL
硬件设备：高性能计算机

环境安装与配置

安装操作系统
- 下载Ubuntu 20.04 LTS的ISO文件，并使用USB驱动器创建一个可启动的安装介质。
- 按照安装向导的指示完成安装过程。
安装开发工具
- 打开终端，运行以下命令安装GCC和相关工具：
- ```
sudo apt update
sudo apt install build-essential
```

安装Node.js
- 安装Node.js：
- ```
sudo apt install nodejs npm
```
安装D3.js
- D3.js是一个基于JavaScript的库，可以通过npm安装：
- ```
npm install d3
```

安装Grafana

添加Grafana的APT仓库并安装：

sudo apt-get install -y apt-transport-https
sudo apt-get install -y software-properties-common wget
wget -q -O - https://packages.grafana.com/gpg.key | sudo apt-key add -
echo "deb https://packages.grafana.com/oss/deb stable main" | sudo tee -a /etc/apt/sources.list.d/grafana.list
sudo apt-get update
sudo apt-get install grafana
sudo systemctl enable grafana-server
sudo systemctl start grafana-server

安装MySQL

安装MySQL数据库：

sudo apt install mysql-server
sudo mysql_secure_installation

安装WebSocket库
- 安装WebSocket库：
- ```
npm install ws
```

实际案例与步骤

步骤1：数据采集与存储

编写数据采集代码

创建一个名为data_collector.js的文件，并编写以下代码：

const mysql = require('mysql');
const connection = mysql.createConnection({host: 'localhost',user: 'root',password: 'your_password',database: 'realtime_data'
});connection.connect(err => {if (err) throw err;console.log('Connected to MySQL database.');
});setInterval(() => {const data = {timestamp: new Date(),value: Math.random() * 100};const sql = 'INSERT INTO data_points (timestamp, value) VALUES (?, ?)';connection.query(sql, [data.timestamp, data.value], (err, result) => {if (err) throw err;console.log('Data inserted:', result);});
}, 1000);

运行数据采集程序
- 运行以下命令启动数据采集程序：
- ```
node data_collector.js
```

步骤2：数据可视化

使用Grafana进行数据可视化
- 打开浏览器，访问http://localhost:3000，使用默认用户名admin和密码admin登录Grafana。
- 添加一个新的数据源，选择MySQL作为数据源类型。
- 配置数据源的连接信息，包括数据库名称、用户名和密码。
- 创建一个新的仪表板，添加一个新的图表。
- 配置图表的数据查询，选择之前添加的数据源和相应的测量值。
- 调整图表的显示设置，例如时间范围、轴标签等。

使用D3.js进行数据可视化

创建一个名为index.html的文件，并编写以下代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实时数据可视化</title><script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body><div id="chart"></div><script>const svg = d3.select("#chart").append("svg").attr("width", 800).attr("height", 600);const xScale = d3.scaleUtc().domain([new Date(Date.now() - 60000), new Date()]).range([0, 800]);const yScale = d3.scaleLinear().domain([0, 100]).range([600, 0]);svg.append("g").attr("transform", "translate(0,600)").call(d3.axisBottom(xScale));svg.append("g").call(d3.axisLeft(yScale));const line = d3.line().x(d => xScale(d.timestamp)).y(d => yScale(d.value));const data = [];setInterval(() => {const newData = { timestamp: new Date(), value: Math.random() * 100 };data.push(newData);if (data.length > 60) data.shift();svg.selectAll("path").remove();svg.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 1.5).attr("d", line);}, 1000);</script>
</body>
</html>

运行D3.js可视化程序
- 打开浏览器，访问index.html文件，查看数据可视化效果。

步骤3：实时数据传输

使用WebSocket进行实时数据传输

创建一个名为server.js的文件，并编写以下代码：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });wss.on('connection', ws => {console.log('Client connected');ws.on('message', message => {console.log('received: %s', message);});setInterval(() => {const data = {timestamp: new Date(),value: Math.random() * 100};ws.send(JSON.stringify(data));}, 1000);
});console.log('WebSocket server started on ws://localhost:8080');

运行WebSocket服务器
- 运行以下命令启动WebSocket服务器：
- ```
node server.js
```

修改D3.js代码以支持WebSocket

修改index.html文件，添加WebSocket客户端代码：

<script>const svg = d3.select("#chart").append("svg").attr("width", 800).attr("height", 600);const xScale = d3.scaleUtc

() .domain([new Date(Date.now() - 60000), new Date()]) .range([0, 800]);

     const yScale = d3.scaleLinear().domain([0, 100]).range([600, 0]);svg.append("g").attr("transform", "translate(0,600)").call(d3.axisBottom(xScale));svg.append("g").call(d3.axisLeft(yScale));const line = d3.line().x(d => xScale(d.timestamp)).y(d => yScale(d.value));const data = [];const socket = new WebSocket('ws://localhost:8080');socket.onmessage = event => {const newData = JSON.parse(event.data);data.push(newData);if (data.length > 60) data.shift();svg.selectAll("path").remove();svg.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 1.5).attr("d", line);};</script>```

4. 运行D3.js可视化程序