当前位置：首页 > news >正文

解决散点图绘制算法单一导致的数据异常问题

news 2025/8/27 11:03:01

背景在后端渲染数据时，采用的是中位数过滤，这就导致后端数据库对应的数据中，如果0过多，会把0当做正常数据，其他值会被当做异常值去掉，导致渲染的图是一条直线

解决方法在图表的上方配置中加一个按钮，点击按钮切换另一个算法继续渲染

在配置中添加按钮的标志和图片

在图绘制的时候会传递默认的算法模式

这里传进来的模式是回调的时候传进来的，一开始初始化的时候是undefined

添加回调函数进行算法切换

渲染按钮

模式切换采用三目运算符进行循环切换

const newMode = currentMode === 'mad' ? 'gauss' : (currentMode === 'gauss' ? 'MediamFilter_3' : 'mad');

       if (!_feature || _feature.algorithmSwitch) {let algorithmId = "algorithmContent" + new Date().getTime()let algorithmContent = $(`<div id="${algorithmId}" style="display:none"><div style="padding:5px;">切换绘图算法</div></div>`)parent.prepend(algorithmContent)let algorithmSwitch = $(`<i><img src="${icons['turn']}" ${toolbarStyle} data="algorithmSwitch" /></i>`)parent.prepend(algorithmSwitch)algorithmSwitch.webuiPopover({ content: '切换绘图算法', trigger: 'hover' });algorithmSwitch.click(() => {// 切换算法模式const currentMode = that.rawOption.algorithmMode || that.options.algorithmMode;console.log('切换前算法模式:', currentMode);const newMode = currentMode === 'mad' ? 'gauss' : (currentMode === 'gauss' ? 'MediamFilter_3' : 'mad');console.log('切换后算法模式:', newMode);// 更新options和rawOptionthat.options.algorithmMode = newMode;that.rawOption.algorithmMode = newMode;console.log('更新后rawOption.algorithmMode:', that.rawOption.algorithmMode);// 更新悬停提示algorithmSwitch.webuiPopover('destroy');algorithmSwitch.webuiPopover({ content: `当前算法: ${newMode}`, trigger: 'hover' });// 调用回调函数(如果存在)if (typeof that.options.onAlgorithmChange === 'function') {console.log('调用回调函数');that.options.onAlgorithmChange(newMode);}})}

调用回调函数重新进行获取数据绘图，将模式传入，后端接收模式后进行判断，选择算法