@damoqiongqiu/ice-chart 0.27.4 → 0.29.0

package/README.md

@@ -115,12 +115,12 @@ gray-100~900、`--bs-border-radius`、`--bs-body-font-family`），图表放进
 
 | 能力 | 状态 | 说明 |
 | --- | --- | --- |
-| 系列类型 | line / area / bar（含横向）/ scatter（含气泡）/ pie（含环形、玫瑰）/ radar / candlestick / heatmap / sankey / funnel / gauge / boxplot / waterfall / treemap / graph / function / parametric | 见下方「图表类型与写法」 |
+| 系列类型 | line / area / bar（含横向）/ scatter（含气泡）/ pie（含环形、玫瑰）/ radar / heatmap / sankey / funnel / gauge / boxplot / waterfall / treemap / graph / function / parametric | 见下方「图表类型与写法」 |
 | 比例尺 | linear / category / time / log | time 轴按跨度自动切换毫秒~年粒度 |
 | 坐标系 | 直角坐标 / 极坐标（饼图） / 雷达 / 桑基图 | 按系列类型自动切换场景 |
 | 坐标轴 | x + **多 y 轴**（左右可配） | 刻度、网格、轴名、标签旋转与自动抽稀、自定义 formatter、**数据域留白 `padding`（默认 5%）** |
 | 图例 | top / bottom / left / right | **可点击切换系列 / 扇区显隐**并重算数据域 |
-| 提示框 | axis / item 触发器 | 画在画布内（不依赖 HTML 浮层）；K 线给 OHLC、桑基给流量 |
+| 提示框 | axis / item 触发器 | 画在画布内（不依赖 HTML 浮层）；箱线图给五数概括、桑基给流量 |
 | 十字准星 | x / y / xy | 带坐标轴数值标签；跟随时长按距离缩放（`crosshair.followDuration`，默认上限 90ms，`0` = 立即跟随） |
 | 悬停高亮 | 圆环 / 柱形描边 | 可配置 `dimOthers` 压暗其他系列 |
 | 选中 | single / multiple | 点击或键盘 Enter，抛出 `select:change` |
@@ -131,7 +131,7 @@ gray-100~900、`--bs-border-radius`、`--bs-body-font-family`），图表放进
 | 跨图联动 | hover / zoom / brush | `linkCharts([a, b])`，按 x 数据值对齐 |
 | 动画 | 进入与数据更新 | 走引擎的 `AnimationManager`（`state.progress` 驱动） |
 | 主题 | light / dark / 自定义片段 | 默认色板取自 ice-render 的设计 token |
-| 大数据 | LTTB 降采样 + 二分命中 | 5 万点 × 3 系列构建 35ms，每条曲线只绘制约 2 点/像素 |
+| 大数据 | LTTB 降采样 + 二分命中 + 列存（虚拟）系列 | 5 万点 × 3 系列构建 35ms，每条曲线只绘制约 2 点/像素；**100 万点散点**开 `virtual: true` 后堆 2.2MB、命中 0.00ms —— [机制与复用边界](./docs/column-store-virtual-series.md) |
 | 无障碍 | 数据表镜像 + aria-live 播报 | `attachA11yMirror()` / `getDataTable()` / `getA11yTree()` |
 
 > **内置文案可配**：无障碍数据表的表头与默认 tooltip 标签可以用 `option.labels` 覆盖
@@ -181,9 +181,13 @@ gray-100~900、`--bs-border-radius`、`--bs-body-font-family`），图表放进
 | `bar` | 类目在 x（默认） | 分组（多系列）与堆叠（同 `stack` 名）；数据项写 `{ value, color }` 可**逐项配色** |
 | `bar`（横向） | `yAxis: { type: 'category', data: [...] }` + `xAxis: { type: 'value' }` | 排行榜；类目也可写在数据项的 `name` 上 |
 | `scatter` | `data: [[x, y, size]]` + `symbolSizeRange` | 第三维映射成直径即气泡图；`symbolSize` 也可传函数 |
+| `scatter` / `line` / `area`（大数据） | `virtual: true` + `data: { x, y }`（列式，推荐 `Float64Array`） | 列存（虚拟）系列：百万级点不建数据点对象与按点缓存，堆 2.2MB / 命中 0.00ms（折线按像素列保留极值）。代价（不进快照、`params.data` 为空）见 [机制与复用边界](./docs/column-store-virtual-series.md) |
+| `heatmap`（大数据） | `virtual: true` + `data: { xCategories, yCategories, values }`（稠密矩阵） | 列存矩阵：1000×1000 = 100 万格堆 3.3MB、命中 O(1)（普通路 4 万格单次命中已 6.8ms）；亚像素按屏幕像素块聚合，热点取最大值 |
+| 实时流（大数据） | `virtual: true` + `appendData(id, items, { maxPoints })` | 列存环形缓冲：窗口满了覆盖最老的，不 concat、不重建。10 万点窗口 **0.40ms/次**（普通路径 5.80ms、p95 15.10ms） |
+| 亿级数据 | `virtual: true` + `data: { sizes, rangeOf, yDomain, loadChunk }` | 分块按需加载：只驻留可见窗口的块。**10 亿逻辑点**（1 万块、常驻 3 块）初始化 3ms、堆 2.7MB |
+| 交给引擎 | `chart.createVirtualSource(id)` → `ICEVirtualLayer` | 列**不复制**直接喂给引擎虚拟子源：窗口裁剪/批量落墨/命中归引擎，白拿「命中即物化」、SVG 导出、对齐参考线；100 万点落墨 2.1ms/帧、命中 0.00ms |
 | `pie` | `data: [{ name, value }]` | `innerRadius` 出环形，`roseType` 出玫瑰图；扇区可点图例隐藏 |
 | `radar` | `radar.indicators` + `data: [数值...]` | 一个系列一个多边形，顶点命中 |
-| `candlestick` | `data: [[open, close, low, high]]` | 影线进数据域，提示框给 OHLC |
 | `boxplot` | `data: [[min, Q1, median, Q3, max]]` 或一组原始观测值 | 恰好 5 个数按五数概括解释，其它长度自动算分位数；命中覆盖整条须 |
 | `heatmap` | `data: [[x类目, y类目, 数值]]` | y 轴自动变类目轴，颜色线性插值 |
 | `waterfall` | `data: [{ name, value }]`，合计项标 `total: true` | 增/减/合计三色 + 连接虚线 |
@@ -214,19 +218,18 @@ chart.appendData('cpu', [[t, v1], [t2, v2]], { maxPoints: 180, animate: true });
   —— 监控场景用 120~300 点的窗口最划算。
 
 配套示例 [examples/live-stream.html](./examples/live-stream.html)：四条曲线共用一个数据发生器 ——
-滑动窗口折线 / 弹簧指针仪表盘 / 每 250ms 左移一列的滚动热力图 / 最后一根实时跳动的 K 线，
+滑动窗口折线 / 弹簧指针仪表盘 / 每 250ms 左移一列的滚动热力图 / 最后一根实时跳动的峰值柱形，
 外加暂停、1×/2×/4× 速度、注入尖峰与 fps 统计。
 
 ### 大屏（深色主题）
 
-同一个脚手架（[examples/assets/dash-kit.js](./examples/assets/dash-kit.js)）下**六个大屏案例**，
+同一个脚手架（[examples/assets/dash-kit.js](./examples/assets/dash-kit.js)）下**五个大屏案例**，
 每个只是「换一套视觉身份 + 换一张面板清单」：
 
 | 大屏 | 视觉身份 | 侧重 |
 | --- | --- | --- |
 | [运营监控](./examples/dashboard.html) | 青 | 12 张图共用一条数据流，跨图三路联动 + 告警亮边 |
-| [设备监控](./examples/dashboard-iot.html) | 青绿 | 水位球 / 设备状态热力 / 心跳 K 线 / 固件占比 |
-| [行情监控](./examples/dashboard-market.html) | 琥珀 + 红涨绿跌 | 分时 / 盘口六档 / 资金流桑基 / 换手水位球 |
+| [设备监控](./examples/dashboard-iot.html) | 青绿 | 水位球 / 设备状态热力 / 心跳峰值 / 固件占比 |
 | [能源调度](./examples/dashboard-energy.html) | 蓝紫 | 源网荷桑基 / 电量平衡瀑布 / **谐波合成（函数绘图）** |
 | [物流调度](./examples/dashboard-logistics.html) | 橙红 | 分拣漏斗 / 包裹流向 / 逐项配色的排名与时段柱 |
 | [函数实验](./examples/dashboard-lab.html) | 紫 | 参数扫动 / 极坐标 / 采样密度 / 表达式诊断 |
@@ -356,7 +359,7 @@ animation: {
   `chart.finishAnimations()` 可把当前动画一次性推到终态（截图 / 测试用）。
 
 各类型的入场形态：柱形从基线错峰长出、折线/面积从左到右画出来、气泡依次弹出、
-饼图/玫瑰图扇形依次扫开、雷达从中心展开、K 线从开盘价上下展开、箱线图从中位线展开、
+饼图/玫瑰图扇形依次扫开、雷达从中心展开、瀑布图逐段累加、箱线图从中位线展开、
 热力图沿对角线逐格浮现、漏斗从等宽收拢成漏斗、仪表盘指针扫到目标值（可配弹簧回弹）、
 桑基连线从源流向目标、矩形树图逐层展开、关系图从环形铺开**收敛到力布局结果**。
 
@@ -536,7 +539,7 @@ const restored = createChart('canvas-2', json);  // 还原：语义 / 窗口 /
   │ ICEGroup(root)                                       │
   │  ├ PlotArea      绘图区背景 + 空白处交互面            │
   │  ├ GridLines     网格线                              │
-  │  ├ LineSeries / BarSeries / PieSeries / RadarSeries / CandlestickSeries / ...  ← containsLocalPoint 即数据命中判定
+  │  ├ LineSeries / BarSeries / PieSeries / RadarSeries / BoxplotSeries / ...  ← containsLocalPoint 即数据命中判定
   │  ├ Axis × N      坐标轴（多 y 轴）                   │
   │  ├ RadarGrid     雷达网格（仅雷达场景）              │
   │  ├ Title / Legend                                    │
@@ -556,14 +559,14 @@ npm run examples:serve      # http://localhost:5177
 ```
 
 示例页面覆盖：基础折线 / 面积、分组与堆叠柱形、多 y 轴叠加、饼图 / 环形图 / 玫瑰图、雷达图、
-K 线与热力图、桑基图、交互总览（框选 + 多选 + 键盘 + 事件日志）、时间轴 + dataZoom 滑块、
-大数据量（5 万点降采样）、无障碍、跨图联动、迷你 MATLAB，以及 **6 个深色大屏**
-（运营 / 设备 / 行情 / 能源 / 物流 / 函数实验）。
+热力图、桑基图、交互总览（框选 + 多选 + 键盘 + 事件日志）、时间轴 + dataZoom 滑块、
+大数据量（5 万点降采样 / **100 万点列存虚拟化：散点 + 折线**）、无障碍、跨图联动、迷你 MATLAB，以及 **5 个深色大屏**
+（运营 / 设备 / 能源 / 物流 / 函数实验）。
 
-六个大屏共用同一套脚手架（`examples/assets/dash-kit.js`：12 列栅格 + 面板组件 + 数据流主循环），
-每个大屏只换一套配色身份与面板清单 —— 底色与主色同源，是「同一个库、不同视觉身份」的六种样子：
+五个大屏共用同一套脚手架（`examples/assets/dash-kit.js`：12 列栅格 + 面板组件 + 数据流主循环），
+每个大屏只换一套配色身份与面板清单 —— 底色与主色同源，是「同一个库、不同视觉身份」的五种样子：
 
-![六个大屏案例](./docs/screenshots/dashboards.png)
+![五个大屏案例](./docs/screenshots/dashboards.png)
 
 每个示例页在图表下方都有两块面板：
 
@@ -655,12 +658,14 @@ node scripts/audit-space.mjs         # 104 张示例图：直角坐标占宽 ≥
 ## 路线图
 
 已落地：极坐标（饼图 / 玫瑰图）、雷达图、多 y 轴、dataZoom 滑块、LTTB 降采样与二分命中、
-无障碍（数据表镜像 + 播报）、K 线、热力图、桑基图、标注（目标线 / 异常点 / 目标区间）。
+**列存（虚拟）系列**（百万级散点，`virtual: true`）、无障碍（数据表镜像 + 播报）、
+热力图、桑基图、标注（目标线 / 异常点 / 目标区间）。
 
 后续候选：
 
 - 桑基节点拖拽重排与折叠（布局已与渲染解耦，扩展成本低）
-- 数据 append 的增量绘制（当前是全量重建像素缓存）
+- 数据 append 的增量绘制（当前是全量重建像素缓存；列存 + 环形缓冲是它的落地路径）
+- 把列存推广到折线 / 面积与热力图（模板与边界见 `docs/column-store-virtual-series.md`）
 - y 轴方向的 dataZoom 滑块（`setAxisDomain` 已可用，缺 UI）
 - 标注的第二梯队：树图 / 日历热力（层级与时间热力的标配）、趋势线与误差棒（按需；
   冷门形态走自定义系列注册口）