本案例是依托 Highcharts 开放的事件钩子与自定义矢量路径能力，可低成本开发异形柱状插件，无需底层图形渲染开发，解决原生条形样式单一、无法直观表达 “双向作用力” 的可视化痛点。
Highcharts原生兼容堆叠、正负色、数据标签、无障碍全套能力，自定义箭头条形直观区分正负向指标，代码轻量易复用，适配科研、工业、财务双向差值可视化场景。
完整可预览 HTML代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义箭头堆叠条形图 - 火星EDL动力对比</title> <!-- 标准官方CDN依赖 --> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <style> .highcharts-figure { width: 100%; margin: 20px auto; } #container { width: 100%; height: 170px; } </style> </head> <body> <figure class="highcharts-figure"> <div id="container"></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 style="color:{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：负值条形专属配色，区分正负维度数据。
适用行业场景
- 航空航天、飞行器力学受力分析图表
- 财务收支双向对比堆叠图（收入正向、支出负向）
- 设备能耗、动力、压力正负差值监控看板
- 项目盈亏、流量增减双向对比简报
- 科研论文、技术报告自定义异形可视化图表
