箱型图-使用js实现：中位数用不同颜色展示
一、效果展示
原始的使用边框呈现的效果不佳，不能直观的看到中位数
使用JS只渲染中位数后效果如下：
二、实现原理
找到中位数的元素，使用js在加载结束后改变该元素的style
中位数元素：
document.querySelector("#Chart__Cells__A3__E26__1621493e-dae3-4188-a09d-804f3bd8d56c__index__0 > svg > g.clipSeriesGroup > g > g:nth-child(5) > g:nth-child(1) > line:nth-child(4)")
其中有几个变量 ：
E26是单元格，
g > g:nth-child(5) 是列的序号，不过好像是倒叙的
g:nth-child(1) 这个应该是系列 我这边只有一个系列所以都是1，
line:nth-child(4)这个是中位数的元素这个不用管
找到中位数元素后，使用js渲染：主要就是遍历 Chart__Cells__A3开头的ID 然后找到 g.clipSeriesGroup 下的24列数据我这边只有24列 然后将中位数的样式改变。
可以按自己的需求修改这几块变量
// 封装一个函数，用于查找符合条件的 line 元素
function findTargetLine(container, index, callback) {
setInterval(function () {
// 找到包含 clipSeriesGroup 类的 g 元素
const clipSeriesGroup = container.querySelector('g.clipSeriesGroup');
if (!clipSeriesGroup) {
console.log(`未找到 clipSeriesGroup 元素，容器 ID: ${container.id}`);
callback(null);
return;
}
var targetGSelector1 = 'g > g:nth-child(' + index + ') > g:nth-child(1)';
const targetG = clipSeriesGroup.querySelector(targetGSelector1);
if (!targetG) {
console.log('未找到目标 g 元素');
callback(null);
return;
}
// 找到目标 line 元素
const targetLine = targetG.querySelector('line:nth-child(4)');
if (!targetLine) {
console.log('未找到目标 line 元素');
callback(null);
return;
}
callback(targetLine);
}, 500);
}
// 使用属性选择器找到所有以 Chart__Cells__A3__A26 开头的容器元素
const containers = document.querySelectorAll('');
const allTargetLines = ;
// 循环处理每个容器
containers.forEach((container) => {
for (let index = 24; index >= 1; index--) {
// 调用函数查找目标元素
findTargetLine(container, index, function (lineElement) {
// 若找到元素，修改其样式
if (lineElement) {
lineElement.style.fill = "rgb(162, 160, 152)";
lineElement.style.fillOpacity = "1";
lineElement.style.stroke = "rgb(234, 68, 49)";
lineElement.style.strokeOpacity = "1";
lineElement.style.strokeWidth = "1";
lineElement.style.filter = "none";
lineElement.style.pointerEvents = "auto";
allTargetLines.push(lineElement);
if (allTargetLines.length > 1) {
const prevLine = allTargetLines;
const currentLine = allTargetLines;
connectLines(prevLine, currentLine);
}
}
});
}
});
