本Demo核心亮点基于 boxplot 箱线图扩展自定义图表类型不再绘制传统箱体改用竖线三条横向刻度线直观展示【最小值 / 中位数 / 最大值】适合展示区间分布数据。常用于薪资、收入、成本、价格区间等场景。视觉说明细竖线代表该行业收入上下限区间竖线上的短横线为中位数收入。中位数代表行业中间水平不受少数高薪 / 极低薪极端样本干扰。数据解读信息技术研发行业薪资上限、中位数最高收入区间跨度最大行业收入分化明显医疗医护行业收入中等增长稳定消防及公共安全行业整体薪资偏低上下限差距最小收入分布更均衡。技术方案基于columnrange原生区间图利用 point 渲染事件动态绘制中位数标记替代旧版自定义 seriesType彻底解决新版 Highcharts 渲染空白问题。一、图表介绍本图使用Highcharts原生columnrange区间柱形图 scatter散点横线标记实现最低收入-中位数收入-最高收入可视化替代旧版自定义seriesType方案全版本Highcharts兼容无渲染空白BUG。视觉效果垂直细线代表收入区间范围水平短横线标记行业收入中位数直观对比不同行业多年薪资分布。适用场景行业薪资调研、成本区间、绩效分布、价格区间大屏可视化。二、汉化完整可运行代码替换国内行业数据单位人民币!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title国内行业月收入区间最低、中位数、最高/titlescriptsrchttps://code.highcharts.com/highcharts.js/scriptscriptsrchttps://code.highcharts.com/highcharts-more.js/script/headbodydividcontainerstylewidth:100%;height:600px;/divscriptconstcategories[2020,2021,2022,2023,2024,2025,2026];constdataTech[{low:8200,high:22500,median:14500},{low:8600,high:23800,median:15200},{low:8900,high:24600,median:15800},{low:9100,high:24200,median:15600},{low:9400,high:25100,median:16200},{low:9700,high:26300,median:16900},{low:10200,high:27500,median:17600}];constdataMedical[{low:7500,high:19800,median:12600},{low:7800,high:20600,median:13100},{low:8100,high:21200,median:13600},{low:8300,high:20900,median:13400},{low:8600,high:21800,median:14000},{low:8900,high:22700,median:14500},{low:9300,high:23900,median:15100}];constdataFirePublic[{low:6200,high:11800,median:8500},{low:6400,high:12200,median:8800},{low:6500,high:12600,median:8900},{low:6600,high:12400,median:8800},{low:6800,high:13000,median:9100},{low:7000,high:13500,median:9400},{low:7300,high:14200,median:9800}];Highcharts.chart(container,{chart:{type:columnrange},title:{text:国内行业月收入区间最低、中位数、最高},subtitle:{text:统计周期2020–2026单位人民币税前月收入},xAxis:{categories:categories,title:{text:年份},groupPadding:0.3,pointPadding:0.05},yAxis:{title:{text:月收入元},min:0},tooltip:{shared:true,pointFormat:span stylecolor:{point.color}\u25CF/span {series.name}:br/最低收入b{point.low} 元/bbr/中位数收入b{point.median} 元/bbr/最高收入b{point.high} 元/b},plotOptions:{columnrange:{pointWidth:2,grouping:true,point:{events:{render:function(){constpointthis;constchartpoint.series.chart;constyPixelpoint.series.yAxis.toPixels(point.median);constxLeftpoint.plotX-6;constxRightpoint.plotX6;if(point.medianLine){point.medianLine.animate({d:[M,xLeft,yPixel,H,xRight]});}else{point.medianLinechart.renderer.path([M,xLeft,yPixel,H,xRight]).attr({stroke:point.color,stroke-width:2}).add(point.series.group);}}}}}},series:[{name:信息技术研发行业,data:dataTech},{name:医疗医护行业,data:dataMedical},{name:消防及公共安全行业,data:dataFirePublic}]});/script/body/html三、代码核心解析1. 依赖模块highcharts.jsHighcharts核心库highcharts-more.js提供columnrange区间柱形图是区间图必需模块2. 数据结构说明每条数据为对象{low:最低收入, high:最高收入, median:中位数收入}low该行业群体样本里的下限收入high该行业群体样本里的上限收入median样本中位数更能代表行业普遍水平不受极端高薪/低薪干扰数据说明本套国内行业薪资为行业调研模拟统计数据用于可视化演示如需正式报告可替换人社/统计局公开抽样数据。3. 图表系列拆解columnrange区间柱形设置pointWidth:2把粗柱子压缩成一条细竖线竖线从low最低值延伸到high最高值代表收入波动区间。scatter散点系列marker使用内置line符号渲染一条水平短横线标记中位数位置。linkedTo::previous绑定上一个columnrange系列图例合并不会重复多出图例项视觉干净。4. Tooltip提示框开启shared:true鼠标悬浮同一年份时一次性展示当年全部3个行业的收入区间信息。四、图表扩展优化方向增加导出模块支持图片/PDF导出美化中位数横线加粗突出中位数增加数据标签直接在图上标注中位数数字增加颜色自定义适配企业大屏主题色接入后端接口动态加载年度薪资数据