当前位置： 首页 > news >正文

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

news 2026/7/19 18:01:46

本示例采用 Highcharts 构建 RRG 相对旋转图，可直观呈现个股 / 板块相对强弱轮动轨迹；灵活实现四象限专业分区、时序轨迹连线，搭配交互式悬浮提示与图表导出，多终端自适应，无缝嵌入投研分析系统，快速落地专业金融可视化能力。

使用 Highcharts 开发 RRG 相对旋转图核心优势：

  1. 底层基于 scatter 散点 + 折线实现时序轨迹，无需从零封装画布绘图逻辑，开发效率更高；
  2. annotations 注释模块支持自定义多边形、渐变填充、文本标签，便捷完成四象限视觉分区；
  3. 丰富的坐标轴、网格、plotLine 配置，快速搭建 RRG 标准 100 基准分割框架；
  4. 内置 tooltip、导出、缩放、事件监听等开箱即用交互；
  5. 原生响应式机制，统一适配多终端；TypeScript 类型完善，便于集成现代前端项目。

图表：Relative Rotation Graph®（相对旋转图，RRG 图）

1. 图表基础信息

  • 图表底层类型：scatter散点图，叠加连线，专业金融分析工具RRG 相对旋转图（JdK 原创指标体系，带有注册商标RS-Ratio® / RS-Momentum®）
  • 用途：股票 / 行业 ETF 相对强弱轮动分析，对比标的相对于基准指数的趋势强度 + 趋势加速度，判断板块 / 个股所处轮动象限。

适用场景：行业轮动、选股、资产配置、趋势跟踪；常见于量化、基金投研、交易复盘。

2. 坐标轴定义

  1. X 轴：JdK RS-Ratio® 相对强弱比率衡量标的中长期相对趋势（相对基准价格走势强弱）
    • ＞100：标的中长期跑赢基准
    • ＜100：标的中长期弱于基准
    • =100：和基准持平
  2. 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. 图表元素说明

  1. Series 数据每条曲线 = 一只标的（Stock1~Stock4）；数组内一组[x,y]是一个时间切片，连线形成运动轨迹，圆点为历史时间节点。
  2. Annotations 注解用自定义多边形 + 径向渐变画出四个象限底色 + 象限名称文字，不属于坐标轴原生背景，是 Highcharts annotation 绘图实现。
  3. Tooltip悬浮展示当前点 RS-Ratio、RS-Momentum 数值。
  4. 样式特色
    • 圆角绘图边框、柔和背景色、无多余刻度线，偏向专业投研看板风格；
    • light-dark()：Highcharts 内置函数，自动适配亮色 / 暗色主题切换颜色；
    • 关闭图例，标准 RRG 图一般不在图内展示图例，页面外部另行展示标的清单。

5. Highcharts RRG图表优缺点

✅ 优势

  1. 同时捕捉「相对强弱水平」+「动量加速度」，区分 “真强势” 和 “即将衰竭的强势”，普通 K 线、相对强弱曲线做不到；
  2. 直观观察板块轮动的演化方向，适合横向多标的对比；
  3. 广泛应用在 ETF 行业轮动、海外市场资产轮动实盘体系。

❌ 局限

  1. 必须指定基准指数，结果高度依赖基准选择；
  2. 只反映相对收益，不代表标的绝对涨跌；存在 “相对跑赢但整体大盘普跌” 的情况；
  3. 参数（回看周期）会显著改变轨迹，需要回测校准。

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>
http://www.cnnetsun.cn/news/3525688.html

相关文章：

  • Aperture多语言SDK使用教程：Go、Java、Python、JavaScript全攻略
  • Golang学习-sync.RWMutex 读写锁
  • 物理AI迎来“开悟时刻”：大晓发布开悟世界模型、以人为中心的环采方案2.0与三大行业解决方案
  • 炸裂！WhatsApp再诉NSO：一纸“永久禁令”为何沦为废纸？全球“合法监听”黑产链调查
  • 金额用 Long 还是 BigDecimal？
  • grunt-contrib-copy 配置文件详解：从基础配置到高级选项
  • 【限时解密】头部MCN私有数字人直播中台架构图：含ASR延迟＜200ms的FPGA加速方案与商用授权清单
  • fluxsort基准测试：在不同数据集上的表现分析
  • KnpGaufretteBundle社区贡献指南：如何参与项目开发与维护
  • Bazel rules_foreign_cc快速入门：5分钟学会构建外部C/C++项目
  • Verilog飞行射击游戏设计与实现：从敌机生成到子弹碰撞
  • 程序员誓言Programmer‘s Oath：保护用户隐私的7个关键原则
  • kableExtra在企业级应用中的应用：构建自动化报表系统的完整方案
  • ES6-learning：模块化编程的终极指南 - 掌握现代JavaScript开发的核心技能
  • McBSP多通道选择与帧同步：TDM通信原理与实战配置详解
  • physx-rs源码探秘：Rust绑定NVIDIA PhysX的实现原理
  • Slug性能优化技巧：提升URL短链服务响应速度的10个方法
  • 英雄联盟Akari助手：免费开源的终极游戏效率工具，快速提升你的操作水平
  • HarmonyOS7 同级分组菜单：用 MenuItemGroup 把菜单分层做得更顺手
  • Unity安卓打包全攻略：从环境配置到自动化构建的实战指南
  • TVA与世界模型共创具身智能“类脑想象力”（7）
  • 先计划，再动刀，Claude Code 的 plan 模式为什么适合严肃工程项目
  • MOSS-Music-8B-Thinking-6bit核心组件详解：音频编码器与语言模型融合
  • HarmonyOS7 跨层购物车页实战：@Provide 与 @Consume 不只是会用，还要用得顺手
  • Apache Commons Collections 与Java Stream API：如何选择最佳数据处理方案
  • 067、3A联动与协同控制：曝光、对焦、白平衡的闭环优化
  • 千问里面的表格怎么复制？AI 导出鸭安卓版一键无损导出完整表格
  • 数字人导游商业化闭环模型（已跑通12家5A景区，ROI达1:5.8的3层变现架构与License授权陷阱预警）
  • 吃透这 17 个概念，比 95% 的开发者更懂 AI
  • 【2018-10-23】Linux下生成c/c++项目代码覆盖率的产生方法