ProcessingP5js数据可视化

折线图绘制程序设计说明

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

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

2. 数据结构
yNum：Y 轴刻度数
xNum：X 轴刻度数（数据点数量）
dataList：存放数值数据的 Float 数组
titleList：存放 X 轴标题的 ArrayList
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数据可视化