1.0.0 • Published 2 years ago
@blueking/bk-down-sample v1.0.0
@blueking/bk-down-sample
可针对时序大数据场景下,一种内置静态,多线程快捷降采样的方案,内置chart.js 采样插件, web worker等。
插件提供了什么功能 ?
- 采样算法:
平均采样
LTTB 最大三角形三个桶
- 采样方式
给发采样阀值返回采样阀值的数据条数
在图表频繁绘制,例如分辨率变化等场景下,提供
mipmap
结构,可根据图表分辨率动态下采样折线图数据。从折线图数据创建类似mipmap
的数据结构,并根据图表分辨率和 x 轴比例动态选择数据的下采样版本。
可扩展内置的 web worker 采样方案 可直接引入插件中的 openWorker 函数直接开启单独线程处理采样数据,而不影响主进程渲染
提供chart.js 采样插件,统一全部配置,完全继承所有采样api,只需要注册插件,开启配置,所有采样方法都在内部实现。
纯静态采样api
所有的采样api函数 都封装在统一的静态类中,可只引用采样类传递配置项和数据,即可在任何场景下进行采样。
配置
// 开启采样
enabled: true,
// openMipMap 为false 情况下当数据出现变化是否自动采样表识
auto: true,
// 是否外部提前使用web worker 进行数据采样,开启时再 init生命周期内不会对数据进行采样
initWork: false,
// 开启 mipMap 结构采样
openMipMap: false,
// 重置为原数据
restoreOriginalData: false,
// 数据点之间所需的最小距离(以像素为单位)。默认值:1 像素
desiredDataPointDistance: 1,
// 最少数量的数据点。限制
minNumPoints: 100,
// 剔除数据到 x 比例的显示范围, 当出现缩放时,数据变化过程中对数据进行二次过滤,剔除小于或者大于 展示区的值
cullData: true,
// openMipMap 为false的情况 该值为true 会在每次采样渲染结束后将采样数据重置为原始数据
preferOriginalData: false
使用
chart.js 使用
// 全局注册
import Chart from 'charts.js';
import register from '@blueking/bk-down-sample'
register(Chart)
// 局部注册
import chart-plugin-down-sample from '@blueking/bk-down-sample/lib/chart-plugin-down-sample'
options: {
plugins: {
downSample: chart-plugin-down-sample
}
}
静态使用
import sampleUtils from '@blueking/bk-down-sample/lib/sampleUtils'
sampleUtils.createSample(data, options)
// 直接调用采样方法
sampleUtils.createData(data, options)
sampleUtils.createDataMipMap(data, options)
sampleUtils.downSample(data, minNumPoints)
...
web worker
使用 webpack 将 @blueking/bk-down-sample/lib/sampleWorker.js 打包到项目中
然后将打包后的文件地址传入到 openWorker 函数中开启默认的worker
import openWorker from '@blueking/bk-down-sample/lib/openWorker'
const createSample = openWorker(url)
createSample(data, options, (data) => {
console.log(data)
new Charts(context, {
...
})
})
自定义web worker
使用 webpack 将 @blueking/bk-down-sample/lib/sampleWorker.js 打包到项目中
然后将打包后的文件地址传入到 openWorker 函数中开启默认的worker
const work = new Worker(url);
// 通信格式固定
work.postMessage({ eventName: 'downSample', datasets: data, options });
work.addEventListener('message', (e) => {
// 自定义处理
});
1.0.0
2 years ago