左右双向堆叠箭头条形图：Highcharts 自定义箭头柱状插件示列代码

本案例是依托 Highcharts 开放的事件钩子与自定义矢量路径能力可低成本开发异形柱状插件无需底层图形渲染开发解决原生条形样式单一、无法直观表达 “双向作用力” 的可视化痛点。Highcharts原生兼容堆叠、正负色、数据标签、无障碍全套能力自定义箭头条形直观区分正负向指标代码轻量易复用适配科研、工业、财务双向差值可视化场景。完整可预览 HTML代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title自定义箭头堆叠条形图 - 火星EDL动力对比/title !-- 标准官方CDN依赖 -- script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/modules/accessibility.js/script style .highcharts-figure { width: 100%; margin: 20px auto; } #container { width: 100%; height: 170px; } /style /head body figure classhighcharts-figure div idcontainer/div /figure script /** * Highcharts 自定义插件实现两端带箭头异形柱状/条形 */ (function (H) { H.addEvent( H.seriesTypes.column, afterColumnTranslate, function () { const series this, options series.options, topMargin options.topMargin || 0, bottomMargin options.bottomMargin || 0, idx series.index; if (options.headSize) { series.points.forEach(function (point) { const shapeArgs point.shapeArgs, w shapeArgs.width, h shapeArgs.height, x shapeArgs.x, y shapeArgs.y, cutLeft idx ! 0, cutRight point.stackY ! point.y || !cutLeft; let len options.headSize; // 箭头像素长度 if (point.y 0) { len * -1; } // 保留原始矩形用于数据标签定位 point.dlBox point.shapeArgs; // 自定义矢量路径绘制两端箭头异形条形 point.shapeType path; point.shapeArgs { d: [ [M, x, y topMargin], [L, x w / 2, y topMargin (cutRight ? len : 0)], [L, x w, y topMargin], [L, x w, y h], [L, x w / 2, y h bottomMargin (cutLeft ? len : 0)], [L, x, y h bottomMargin], [L, x, y], [Z] ] }; }); } } ); }(Highcharts)); // 图表渲染 Highcharts.chart(container, { chart: { type: bar, height: 170 }, title: { text: 火星进入下降着陆阶段作用力对比 }, plotOptions: { bar: { headSize: 6, // 自定义箭头尺寸插件专用配置项 stacking: normal, // 普通堆叠 dataLabels: { enabled: true, y: 20, verticalAlign: bottom, color: #000 }, color: rgb(255, 7, 77), // 正向力红色 negativeColor: rgb(1, 127, 250), // 负向阻力蓝色 accessibility: { exposeAsGroupOnly: true } } }, tooltip: { format: span stylecolor:{point.color}●/span b{series.name}: {point.y}/b }, accessibility: { typeDescription: 堆叠条形受力图表正向加速力向右展示负向减速阻力向左展示, series: { descriptionFormat: 第{add series.index 1}组系列名称{series.name}{#if (gt series.points.0.y 0)}加速力{else}减速阻力{/if}数值{series.points.0.y} } }, yAxis: { reversedStacks: false, opposite: true, labels: { enabled: false }, title: , stackLabels: { enabled: true, verticalAlign: top, style: { fontSize: 1.2em }, format: {#if isNegative}最小值{else}最大值{/if}{total} }, startOnTick: false, endOnTick: false }, xAxis: { visible: false, title: }, legend: { enabled: false }, series: [ // 正向叠加加速力 { name: 初始进入速度推力, data: [15] }, { name: 火星重力, data: [3] }, // 负向减速阻力 { name: 再入大气阻力, data: [-9] }, { name: 降落伞阻力, data: [-7] }, { name: 隔热罩分离阻力, data: [-0.5] }, { name: 反推火箭减速, data: [-1.5] }, { name: 天空起重机缓冲力, data: [-1] } ] }); /script /body /html图表类型解析1. 图表类型自定义插件异形堆叠水平条形图bar基于原生 column 系列扩展自定义 path 矢量路径插件实现条形两端箭头造型支持正负双向堆叠正向红色向右、负向蓝色向左适用于作用力、收支、正负差值对比场景。2. 自定义插件核心原理监听afterColumnTranslate渲染完成钩子拦截每个柱子绘制逻辑通过headSize自定义箭头伸出长度区分首条 / 末条堆叠块单侧显示箭头放弃默认矩形渲染改用 SVG path 路径绘制带箭头的异形封闭图形保留原始矩形dlBox保证数据标签位置不偏移。3. 关键业务配置拆解双向堆叠区分正负negativeColor单独配置负值条形颜色直观区分推力 / 阻力、收入 / 支出堆叠总量标签stackLabels展示左右两侧堆叠总和标注最大 / 最小累计值极简坐标轴 X 轴完全隐藏仅保留数值堆叠图形画面干净适合仪表盘、简报无障碍完整适配 内置系列朗读描述区分加速 / 减速两类力满足科研、政务可视化无障碍规范统一箭头尺寸控制plotOptions.bar.headSize:6全局统一箭头大小按需调整粗细视觉效果。插件核心可调整参数headSize箭头伸出像素长度数值越大箭头越突出topMargin / bottomMargin条形上下留白间距cutLeft/cutRight逻辑自动判断堆叠首尾块仅外侧一端渲染箭头中间堆叠块无箭头视觉连贯negativeColor负值条形专属配色区分正负维度数据。适用行业场景航空航天、飞行器力学受力分析图表财务收支双向对比堆叠图收入正向、支出负向设备能耗、动力、压力正负差值监控看板项目盈亏、流量增减双向对比简报科研论文、技术报告自定义异形可视化图表