# DataVis Chpt2

**Repository Path**: drbin/chpt2

## Basic Information

- **Project Name**: DataVis Chpt2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-17
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 数据可视化交互网站 - 第2章

这是一个基于Chart.js的数据可视化交互网站，展示了第2章内容的各种图表类型和交互功能。

## 功能特性

### 📊 支持的图表类型
- **折线图** - 未来15天最高气温和最低气温
- **柱形图** - 2013-2019财年阿里巴巴GMV数据
- **条形图** - 各商品种类的网购替代率
- **堆积面积图** - 物流公司物流费用统计
- **直方图** - 人脸识别的灰度直方图（动态生成）
- **饼图** - 支付宝月账单报告（默认实心饼图）
- **散点图** - 汽车速度与制动距离的关系
- **箱形图** - 2017年和2018年全国发电量统计
- **雷达图** - 霍兰德职业兴趣测试
- **误差棒图** - 4个树种不同季节的细根生物量

### 🎛️ 交互功能
- **数据集切换** - 支持多组数据切换（柱形图、饼图）
- **图表下载** - 将图表保存为PNG图片
- **数据编辑** - 实时编辑图表数据并应用更改
- **数据重置** - 恢复原始数据
- **图表选项**：
  - 配色方案（默认、柔和色、鲜艳色、单色）
  - 动画速度调节
  - 显示/隐藏图例
  - 显示/隐藏网格
  - 显示/隐藏数据标签

### ⌨️ 键盘快捷键
- `Ctrl + S` - 下载图表
- `Ctrl + E` - 编辑数据
- `Ctrl + R` - 重置数据

## 技术栈

- **前端框架**: 原生JavaScript + HTML5 + CSS3
- **图表库**: Chart.js 3.x
- **开发语言**: JavaScript ES6+
- **响应式设计**: 支持各种屏幕尺寸

## 项目结构

```
Chpt2/
├── index.html          # 主页面
├── README.md           # 项目说明
├── css/
│   └── style.css       # 样式文件
└── js/
    ├── data.js         # 图表数据
    ├── charts.js        # 基础图表功能
    ├── charts-utils.js  # 扩展图表类型
    ├── charts-tables.js # 数据表格功能
    ├── charts-events.js # 事件处理功能
    └── main.js         # 主程序入口
```

## 快速开始

1. **克隆仓库**
   ```bash
   git clone https://github.com/osugaBin/chpt2.git
   cd chpt2
   ```

2. **启动本地服务器**
   ```bash
   # 使用Python
   python -m http.server 8000
   
   # 或使用Node.js
   npx serve
   ```

3. **访问网站**
   打开浏览器访问 `http://localhost:8000`

## 使用说明

1. 通过顶部导航栏选择不同的图表类型
2. 使用右侧选项面板调整图表设置
3. 点击"切换数据集"按钮切换不同数据模式
4. 使用数据面板查看和编辑数据
5. 点击"下载图表"保存当前图表

## 自定义配置

### 修改默认设置
在 `js/charts.js` 中可以修改图表的默认配置：

```javascript
config: {
    animation: {
        duration: 1000  // 动画时长
    },
    responsive: true,
    maintainAspectRatio: false
}
```

### 添加新图表类型
1. 在 `js/data.js` 中添加新数据
2. 在 `js/charts.js` 中添加创建方法
3. 在 `js/charts-utils.js` 中添加扩展功能
4. 在 `js/charts-tables.js` 中添加数据表格支持
5. 在 `js/charts-events.js` 中添加事件处理

## 浏览器支持

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

本项目仅用于教学和演示目的。

## 更新日志

### 2025-09-17
- 修改饼图默认显示为实心饼图而非环形图
- 优化代码结构和注释
- 添加项目说明文档

## 作者

数据可视化课程项目 - 第2章