ProcessingP5js数据可视化

折线图绘制程序设计说明

可以读取表格数据，并转换成折线图，条形图和饼状图，并设计了衔接动画效果

1. 功能概述

本程序使用 Processing 读取 CSV 文件数据，并绘制带有坐标轴和数据点的折线图。横坐标（X 轴）表示数据的标题，纵坐标（Y 轴）表示数值。数据点之间用线段连接，形成折线图。

2. 数据结构

yNum：Y 轴刻度数

xNum：X 轴刻度数（数据点数量）

dataList：存放数值数据的 Float 数组

titleList：存放 X 轴标题的 ArrayList<String>

maxNum 和 minNum：存储数据的最大值和最小值

3. 系统架构

系统主要由以下模块组成：

setup()：初始化窗口、加载数据

loadFileAndDefineArgs()：加载 CSV 文件，解析数据，并计算最大值、最小值

draw()：刷新画布并绘制坐标轴和折线图

drawAxis()：绘制坐标轴，并标注 X 轴和 Y 轴刻度

LineChart()：绘制折线图，包括连接数据点和绘制数据点

4. 流程说明

读取数据：程序从 data.csv 文件读取数据，并将第一列作为 X 轴标题，第二列作为数值存入 dataList。

计算范围：找出数据的最大值 maxNum 和最小值 minNum，用于确定 Y 轴刻度。

绘制坐标轴：

X 轴：间隔 30 像素，标注标题

Y 轴：根据最大值等分 10 级刻度，并标注数值

绘制折线图：

根据数据计算 Y 轴坐标

用 line() 连接相邻数据点

用 rect() 绘制小方块标识数据点

ProcessingP5js数据可视化