Relative Rotation Graph（相对旋转图）｜Highcharts创建RRG 图示列代码

本示例采用 Highcharts 构建 RRG 相对旋转图可直观呈现个股 / 板块相对强弱轮动轨迹灵活实现四象限专业分区、时序轨迹连线搭配交互式悬浮提示与图表导出多终端自适应无缝嵌入投研分析系统快速落地专业金融可视化能力。使用 Highcharts 开发 RRG 相对旋转图核心优势底层基于 scatter 散点 折线实现时序轨迹无需从零封装画布绘图逻辑开发效率更高annotations 注释模块支持自定义多边形、渐变填充、文本标签便捷完成四象限视觉分区丰富的坐标轴、网格、plotLine 配置快速搭建 RRG 标准 100 基准分割框架内置 tooltip、导出、缩放、事件监听等开箱即用交互原生响应式机制统一适配多终端TypeScript 类型完善便于集成现代前端项目。图表Relative Rotation Graph®相对旋转图RRG 图1. 图表基础信息图表底层类型scatter散点图叠加连线专业金融分析工具RRG 相对旋转图JdK 原创指标体系带有注册商标RS-Ratio® / RS-Momentum®用途股票 / 行业 ETF 相对强弱轮动分析对比标的相对于基准指数的趋势强度 趋势加速度判断板块 / 个股所处轮动象限。适用场景行业轮动、选股、资产配置、趋势跟踪常见于量化、基金投研、交易复盘。2. 坐标轴定义X 轴JdK RS-Ratio® 相对强弱比率衡量标的中长期相对趋势相对基准价格走势强弱100标的中长期跑赢基准100标的中长期弱于基准100和基准持平Y 轴JdK RS-Momentum® 相对动量衡量相对强弱的变化速度加速度100相对优势正在扩大动量上行100相对优势正在收敛动量下行100相对强弱变化速率持平十字中心线x100、y100是分界线将画布切分为四个标准象限。3. 四大象限含义核心规则象限位置名称坐标条件交易含义底色左上LAGGING 落后RS-Ratio100RS-Momentum100中长期跑输基准弱势还在加剧规避区间红色渐变左下IMPROVING 改善RS-Ratio100RS-Momentum100中长期依旧偏弱但弱势开始收敛潜在反转观察区蓝色渐变右下LEADING 领涨RS-Ratio100RS-Momentum100中长期跑赢基准优势持续扩大最佳持有区间绿色渐变右上WEAKENING 走弱RS-Ratio100RS-Momentum100依旧强于基准但上涨动能衰竭警惕拐点、准备止盈黄色渐变轨迹逻辑重点 理想强势轮动路径Improving → Leading → Weakening → Lagging → Improving标的沿着顺时针方向循环切换象限轨迹箭头代表时间演进观察移动方向比单纯落在哪个象限更重要。4. 图表元素说明Series 数据每条曲线 一只标的Stock1~Stock4数组内一组[x,y]是一个时间切片连线形成运动轨迹圆点为历史时间节点。Annotations 注解用自定义多边形 径向渐变画出四个象限底色 象限名称文字不属于坐标轴原生背景是 Highcharts annotation 绘图实现。Tooltip悬浮展示当前点 RS-Ratio、RS-Momentum 数值。样式特色圆角绘图边框、柔和背景色、无多余刻度线偏向专业投研看板风格light-dark()Highcharts 内置函数自动适配亮色 / 暗色主题切换颜色关闭图例标准 RRG 图一般不在图内展示图例页面外部另行展示标的清单。5. Highcharts RRG图表优缺点✅ 优势同时捕捉「相对强弱水平」「动量加速度」区分 “真强势” 和 “即将衰竭的强势”普通 K 线、相对强弱曲线做不到直观观察板块轮动的演化方向适合横向多标的对比广泛应用在 ETF 行业轮动、海外市场资产轮动实盘体系。❌ 局限必须指定基准指数结果高度依赖基准选择只反映相对收益不代表标的绝对涨跌存在 “相对跑赢但整体大盘普跌” 的情况参数回看周期会显著改变轨迹需要回测校准。7. 适用场景投研看板、量化平台、基金行业轮动分析、交易复盘系统、金融数据 Web 可视化。完整可运行 HTML!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleRRG 相对旋转图 Relative Rotation Graph/title !-- Highcharts CDN -- script srchttps://code.highcharts.com/highcharts.js/script style .highcharts-figure { max-width: 1100px; margin: 0 auto; } #container { height: 620px; } /style /head body figure classhighcharts-figure div idcontainer/div /figure script Highcharts.chart(container, { // 基础图表配置 chart: { type: scatter, // 底层散点图开启连线实现轨迹 height: 90%, backgroundColor: var(--highcharts-neutral-color-3, #f7f7f8), plotBorderRadius: 10, // 绘图区域圆角 plotBorderWidth: 10, plotBorderColor: var(--highcharts-background-color, #fff), spacing: [10, 85, 15, 20], style: { fontFamily: IBM Plex Sans }, className: rounded-plot-border }, legend: { enabled: false // RRG标准做法关闭内置图例外部自定义标的列表 }, // 自定义注解绘制四象限渐变底色 象限文字标签 annotations: [{ draggable: false, shapeOptions: { type: path, strokeWidth: 0 }, zIndex: 0, // 置于最底层作为背景 shapes: [{ // 左上 LAGGING 落后象限 红色渐变 fill: { radialGradient: { cx: 0, cy: 1, r: 1.1 }, stops: [ [0, rgba(255, 0, 0, 0.3)], [1, rgba(255,255,255, 0.1)] ] }, points: [{x: 96,y: 100},{x: 100,y: 100},{x: 100,y: 96},{x: 96,y: 96}] }, { // 左下 IMPROVING 改善象限 蓝色渐变 fill: { radialGradient: { cx: 0, cy: 0, r: 1.1 }, stops: [ [0, rgba(0, 0, 255, 0.2)], [1, rgba(255,255,255, 0.1)] ] }, points: [{x: 96,y: 104},{x: 100,y: 104},{x: 100,y: 100},{x: 96,y: 100}] }, { // 右下 LEADING 领涨象限 绿色渐变 fill: { radialGradient: { cx: 1, cy: 0, r: 1.1 }, stops: [ [0, rgba(0, 255, 0, 0.2)], [1, rgba(255,255,255, 0.1)] ] }, points: [{x: 100,y: 104},{x: 104,y: 104},{x: 104,y: 100},{x: 100,y: 100}] }, { // 右上 WEAKENING 走弱象限 黄色渐变 fill: { radialGradient: { cx: 1, cy: 1, r: 1.1 }, stops: [ [0, rgba(255, 255, 0, 0.3)], [1, rgba(255,255,255, 0.1)] ] }, points: [{x: 100,y: 100},{x: 104,y: 100},{x: 104,y: 96},{x: 100,y: 96}] }], labelOptions: { backgroundColor: transparent, borderWidth: 0, y: 0, padding: 10, style: { fontSize: 12px, fontWeight: 700, textOutline: 3px light-dark(#ffffff80, #00000080) } }, labels: [{ text: LAGGING, style: { color: #c80056 }, point: { x: 96, y: 96 } }, { text: IMPROVING, style: { color: #2e6fcb }, point: { x: 96, y: 104 } }, { text: LEADING, style: { color: #008224 }, point: { x: 104, y: 104 } }, { text: WEAKENING, style: { color: #9a5c00 }, point: { x: 104, y: 96 } }] }], title: { text: Relative Rotation Graph® 相对旋转图 }, plotOptions: { series: { lineWidth: 2, // 轨迹连线宽度 marker: { enabled: true, radius: 3, symbol: circle }, connectEnds: false, turboThreshold: 0 } }, tooltip: { pointFormat: RS-Ratio® 相对比率: b{point.x}/bbr RS-Momentum® 相对动量: b{point.y}/b }, // X轴RS-Ratio 中长期相对强弱 xAxis: { min: 96, max: 104, plotLines: [{ value: 100, width: 1, color: var(--highcharts-neutral-color-80), zIndex: 1 }], title: { text: JdK RS-Ratio® 相对强弱比率, style: { fontWeight: bold } }, tickWidth: 0, lineWidth: 0, gridLineWidth: 1 }, // Y轴RS-Momentum 动量加速度 yAxis: { min: 96, max: 104, plotLines: [{ value: 100, width: 1, color: var(--highcharts-neutral-color-80), zIndex: 1 }], title: { text: JdK RS-Momentum® 相对动量, style: { fontWeight: bold } }, gridLineWidth: 1 }, // 标的轨迹数据 [RS-Ratio, RS-Momentum]按时间顺序排列 series: [{ name: Stock 1, color: light-dark(#9a5c00, #eaff00), data: [ [102, 102], [102.25, 101.5], [102.5, 101], [102.875, 99.5], [102.625, 98.25], [102.375, 97.875], [101.75, 98], [101.375, 98] ] }, { name: Stock 2, color: light-dark(#004bb3, #2caffe), data: [ [101.8, 98.3], [101.4, 97.5], [100.6, 97.25], [99.9, 97.625], [99.9, 98.5], [99.8, 99.75], [99.8, 100], [99.9, 102], [100, 102.5] ] }, { name: Stock 3, color: light-dark(#008224, #00e676), data: [ [98, 96.5], [97.2, 97], [97.1, 98], [97, 99], [97, 99.5], [97.05, 100], [97.1, 100.5], [97.15, 100.8], [97.2, 101.3], [97.3, 102], [97.4, 102.5], [97.8, 103], [98.1, 103.2], [98.6, 103.4], [99.1, 103.5], [99.6, 103.6], [100.4, 103.5] ] }, { name: Stock 4, color: #008224, data: [ [98.5, 98.5], [98.7, 99], [99, 99.3], [99.3, 100], [99.5, 100.5], [100, 101.3], [100.5, 101.8], [101.3, 103] ] }], navigation: { buttonOptions: { theme: { fill: none }, y: -7 } }, // 移动端自适应规则 responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { chart: { spacing: [10, 10, 15, 10], height: 100%, plotBorderWidth: 7 }, title: { style: { fontSize: 13 } }, xAxis: { labels: { style: { fontSize: 0.6em } }, title: { style: { fontWeight: normal } } }, yAxis: { labels: { style: { fontSize: 0.6em } }, title: { style: { fontWeight: normal } } } } }] } }); /script /body /html