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：相对强弱变化速率持平
十字中心线
x=100、y=100是分界线，将画布切分为四个标准象限。
3. 四大象限含义（核心规则）
| 象限位置 | 名称 | 坐标条件 | 交易含义 | 底色 |
|---|---|---|---|---|
| 左上 | LAGGING 落后 | RS-Ratio＜100，RS-Momentum＜100 | 中长期跑输基准，弱势还在加剧；规避区间 | 红色渐变 |
| 左下 | IMPROVING 改善 | RS-Ratio＜100，RS-Momentum＞100 | 中长期依旧偏弱，但弱势开始收敛，潜在反转观察区 | 蓝色渐变 |
| 右下 | LEADING 领涨 | RS-Ratio＞100，RS-Momentum＞100 | 中长期跑赢基准，优势持续扩大；最佳持有区间 | 绿色渐变 |
| 右上 | WEAKENING 走弱 | RS-Ratio＞100，RS-Momentum＜100 | 依旧强于基准，但上涨动能衰竭；警惕拐点、准备止盈 | 黄色渐变 |
轨迹逻辑重点： 理想强势轮动路径：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 lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RRG 相对旋转图 Relative Rotation Graph</title> <!-- Highcharts CDN --> <script src="https://code.highcharts.com/highcharts.js"></script> <style> .highcharts-figure { max-width: 1100px; margin: 0 auto; } #container { height: 620px; } </style> </head> <body> <figure class="highcharts-figure"> <div id="container"></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}</b><br>' + '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>