# ochart

**Repository Path**: copperpeas/ochart

## Basic Information

- **Project Name**: ochart
- **Description**: 针对实时，高频数据渲染的需求，基于WEBGL技术，实现了折线，热力图，面积图等的图形库，核心是有一个图库引擎，可以基于改引擎开发更多图形..
静态图形展示，实时图形绘制，历史数据图形查看与动态加载
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-21
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Ochart

`Ochart` 是一个面向监护、脑电、频谱、趋势回放等场景的轻量级 2D 图形组件库。  
当前实现采用：

- `Axis` 使用 `Canvas`
- `Series` 使用 `WebGL`
- 支持多轴、实时流式更新、历史拖拽回放、热力图、折线、面积图、柱状图

之所以使用 `WebGL` 来渲染 `Series`，核心就是为了满足实时场景的性能需求。  
在数据持续更新、点数较多、需要频繁重绘时，纯 `Canvas` 更容易出现卡顿，而 `WebGL` 更适合承担这一层高频渲染。

这个仓库同时带了一组可以直接打开的 `demo`，方便快速查看项目当前已经能实现的效果。

## 能力概览

- 折线图
- 阶梯折线图
- 热力图
- 堆叠面积图
- 柱状图
- 左右双 Y 轴
- 历史窗口拖拽
- 预加载多屏历史数据
- 时间轴滑块浏览
- 实时数据滚动更新
- 自定义坐标轴刻度与可视范围

## 快速开始

### 1. 安装依赖

这个仓库当前没有额外 npm 依赖，确保本机安装了 Node.js 即可。

### 2. 启动本地预览

```bash
npm run start
```

默认会启动一个本地静态服务：

```text
http://localhost:8891
```

### 3. 打开总入口

```text
http://localhost:8891/demo.html
```

## Demo 导航

### 通用图表示例

- `demo.html`
  总入口，包含折线图、热力图、阶梯折线、面积图、柱状图等基础能力展示。

### DSA

- `demo/dsa/realtime.html`
  DSA 实时热力图展示，带色卡和多图联动布局。

- `demo/dsa/history.html`
  DSA 历史回放页。
  支持：
  - 时间轴拖拽
  - 上一屏 / 下一屏
  - 半小时 / 1小时 / 2小时开窗
  - 每侧预加载 1 / 2 / 3 屏
  - 历史窗口输入与时间格式转换
  - 热力图不足一屏时的数据补齐
  - 谱缘线模拟

- `demo/dsa/dsa.html`
  更偏基础演示性质的 DSA 页面。

### EEG

- `demo/eeg/realtime.html`
  EEG 实时波形页面。

- `demo/eeg/history.html`
  EEG 历史回放页。
  支持：
  - 拖拽浏览历史
  - 多通道折线
  - 开窗切换
  - 预加载缓存
  - 不足一屏时左侧补 `NaN`
  - 按拖拽方向判断历史动态加载

- `demo/eeg/eeg.html`
  EEG 基础演示页。

### AREA

- `demo/area/realtime.html`
  实时面积图 / 趋势图页面，包含多条 `AreaSeries` 和 `LineSeries`。

- `demo/area/history.html`
  AREA 历史回放页。
  支持：
  - 时间戳 X 轴
  - 拖拽历史查看
  - 上一屏 / 下一屏
  - 多屏预加载
  - 半小时 / 1小时 / 2小时窗口切换
  - 多条 Area / Line 历史趋势联动渲染

- `demo/area/area.html`
  面积图基础演示页。

## 当前目录结构

```text
demo/
  area/
  dsa/
  eeg/
src/
  axis/
  core/
  event/
  ext/
  render/
  series/
```

## 核心代码位置

- `src/core/Ochart.js`
  图表容器、坐标轴、系列、交互入口。

- `src/render/WebGLSeriesRenderer.js`
  各类系列的 WebGL 渲染实现。

- `src/render/AxisCanvasRenderer.js`
  坐标轴与网格绘制。

- `src/axis/NumericAxis.js`
  数值轴与可视范围事件模型。

## 适合先看的页面

如果你第一次打开这个项目，建议按这个顺序看：

1. `demo.html`
   快速理解基础图元能力。
2. `demo/dsa/history.html`
   看热力图历史回放、拖拽、预加载、时间窗口。
3. `demo/eeg/history.html`
   看折线历史回放、多通道、动态加载。
4. `demo/area/history.html`
   看 Area 历史趋势回放。

## 说明

这个仓库当前更偏 demo / 能力验证形态，很多页面都在围绕：

- 历史数据回放
- 数据窗口裁剪
- 预加载策略
- 坐标轴事件模型
- 图形性能表现

如果你是拿它做业务图形底座，建议优先从 `history` 页面和 `src/core`、`src/render` 这几块入手。