A high-performance canvas rendering engine for charts and visualizations, supporting Canvas 2D and WebGL rendering
npm install @rfkit/rendererSeries(Line/Bar/Area/Stepline)、Heatmap、Fluorescence、Gauge、Dial、Radar、IQ、IQEyeHeatmapWebGL(大规模强度矩阵,颜色查表渲染)ColorInterpolator、GraphicType、OrientationType、AxisYRange、SeriesConfig 等``bash`
pnpm install
pnpm dev # 实时构建
pnpm build # 生成 dist
pnpm check # biome 格式与检查
作为依赖使用(发布包名为 @rfkit/renderer):
`bash`
pnpm add @rfkit/renderer
`html`
创建渲染器并推送数据:
`ts
import {
Heatmap,
Series,
HeatmapWebGL,
GraphicType
} from '@rfkit/renderer';
const heatmap = new Heatmap({
id: 'heatmap',
range: [-120, 0],
colors: ['#001B44', '#0041FF', '#00D1FF', '#00FFA3', '#FEE440', '#FF006E']
});
heatmap.render(
Array.from({ length: 120 }, () =>
Array.from({ length: 256 }, (_, i) => -110 + Math.sin(i / 16) * 30)
)
);
const sweep = new Series({
id: 'series',
range: [-120, 10]
});
sweep.render({
name: 'spectrum',
type: GraphicType.Line,
color: '#00FFA3',
data: Float32Array.from({ length: 512 }, (_, i) => -90 + Math.cos(i / 18) * 15)
});
`
使用 WebGL 热力渲染(需要 WebGL2 支持):
`ts
const heatmapGL = new HeatmapWebGL({
id: 'heatmap-webgl',
range: [-120, 0],
colors: ['#0B1021', '#3465A4', '#5BC0EB', '#9BF6FF', '#FDE74C', '#FF206E']
});
heatmapGL.render(largeMatrix); // largeMatrix: number[][]
`
接收 SeriesConfig(必填 name,data 为 Float32Array,type 由 GraphicType 指定)。
- Heatmap / HeatmapWebGL 接收 number[][],内层数组表示一行数据。
- Fluorescence 接收 { fluorescenceData: Map。
- IQ/IQEye 接收 { IData: number[], QData: number[] }。
- Dial/Radar 使用 CircularData;Gauge 使用 { value: number; limit?: number }。常用操作:
setRange(range) 调整量程并重绘;resize() 在容器尺寸变化后调用;clear()` 清空画布及内部数据。