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

发布时间：2026/7/25 6:57:06

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

相关新闻

开发者工具化实战：身份证签发机关查询 API 的工程化应用

开发者工具化实战：身份证签发机关查询 API 的工程化应用

适用场景 在实名认证、户籍管理、金融风控等业务中，经常需要验证用户提供的身份证号是否对应合法的签发机关。例如，用户提交身份证号后，系统可通过前 6 位行政区划代码获取对应的公安局名称，从而辅助判断身份证真伪。该 API 专为此…

2026/7/25 11:48:27 阅读更多 →
iNiR系统工具深度指南：截图、OCR、屏幕录制、剪贴板管理等实用功能详解

iNiR系统工具深度指南：截图、OCR、屏幕录制、剪贴板管理等实用功能详解

iNiR系统工具深度指南：截图、OCR、屏幕录制、剪贴板管理等实用功能详解 【免费下载链接】iNiR A Niri shell illogical-impulse based - with some modifications.. 项目地址: https://gitcode.com/gh_mirrors/in/iNiR iNiR是一款基于Niri shell的系统工具集…

2026/7/25 13:34:46 阅读更多 →
物理AI迎来“开悟时刻”：大晓发布开悟世界模型、以人为中心的环采方案2.0与三大行业解决方案

物理AI迎来“开悟时刻”：大晓发布开悟世界模型、以人为中心的环采方案2.0与三大行业解决方案

7月19日，世界人工智能大会主办，大晓机器人承办的2026 世界人工智能大会重磅议程 —— 世界模型 “六小龙” 巅峰论坛在沪启幕。本次论坛以驱动物理 AI 从 “理解” 到 “执行” 为核心命题，汇聚诺贝尔奖得主、全球顶尖学者、头部科技企业掌舵…

2026/7/25 13:34:43 阅读更多 →

最新新闻

XCVU5P-2FLVA2104E选型指南：Virtex UltraScale+系列对比与高性能应用选型建议

XCVU5P-2FLVA2104E选型指南：Virtex UltraScale+系列对比与高性能应用选型建议

XCVU5P-2FLVA2104E：AMD Virtex UltraScale 16nm高性能FPGA深度解析在数据中心加速、5G基带处理、雷达系统和高端测试测量等对计算密度、串行带宽和逻辑资源有极致要求的应用中，FPGA的选型往往决定了系统能否在功耗和物理尺寸约束下达成性能目标。AMD&…

2026/7/25 19:45:26 阅读更多 →
MSP430F525x DVIO域Bootloader启动时序详解与调试实践

MSP430F525x DVIO域Bootloader启动时序详解与调试实践

1. 项目概述与核心价值在嵌入式产品开发，尤其是电池供电或对功耗极其敏感的领域，德州仪器的MSP430系列MCU一直是工程师手中的王牌。我接触这个系列超过十年，从早期的F1xx到现在的F5xx，看着它的内核从8位MSP430演进到16位RISC&…

2026/7/25 19:45:26 阅读更多 →
深度解析XCKU060-2FFVA1156I：AMD 72.6万逻辑单元Kintex UltraScale FPGA

深度解析XCKU060-2FFVA1156I：AMD 72.6万逻辑单元Kintex UltraScale FPGA

XCKU060-2FFVA1156I：AMD Kintex UltraScale中端FPGA深度解析在无线通信基带处理、视频广播、数据中心加速以及高分辨率医疗成像等对算力和I/O带宽有综合要求的应用中，FPGA需要在逻辑密度、DSP处理能力和高速接口之间取得平衡。AMD（原Xilinx&a…

2026/7/25 19:45:26 阅读更多 →
2026年大模型学习路径与核心技术解析

2026年大模型学习路径与核心技术解析

1. 为什么2026年是大模型入行的黄金窗口期 2026年将成为AI领域从业者的关键转折点。根据技术成熟度曲线，大模型技术将在2025-2027年间进入实质生产高峰期。这意味着： 企业级应用场景将完成初步验证 工具链和基础设施趋于完善 人才需求缺口达到峰值 对…

2026/7/25 19:45:26 阅读更多 →
Agent 框架选型踩坑：LangGraph 处理长任务时内存泄漏？Taotoken 实测 CrewAI 更稳定

Agent 框架选型踩坑：LangGraph 处理长任务时内存泄漏？Taotoken 实测 CrewAI 更稳定

LangGraph vs CrewAI vs AutoGen vs Dify：2026年AI Agent框架深度评测与Taotoken平台实战 上周在Taotoken云平台进行了一次长达6小时的电商订单处理流水线测试，当使用LangGraph框架时服务器内存从初始8GB一路飙升到32GB触发告警，而切换至Cre…

2026/7/25 19:45:26 阅读更多 →
OneCommander：高效文件管理的双窗格神器

OneCommander：高效文件管理的双窗格神器

1. 为什么Windows原生文件管理器让人抓狂？ 作为一个每天要和上百个文件打交道的设计师，我受够了Windows资源管理器的反人类设计。每次需要在两个文件夹之间来回拖拽文件时，那种在层层叠叠的窗口间反复切换的窒息感，简直让人想砸键…

2026/7/25 19:44:25 阅读更多 →

日新闻

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档，但是相关网站浏览体验不好各种广告，各种登录验证，需要很多步骤才能下载文档，该脚本就是为了解决您的…

2026/7/25 0:00:35 阅读更多 →
C++ string类模拟实现：从深拷贝到内存管理的完整指南

C++ string类模拟实现：从深拷贝到内存管理的完整指南

1. 项目概述：为什么我们要“手撕”string类？在C的学习道路上，尤其是从C语言过渡到C的“初阶”阶段，string类绝对是一个绕不开的核心。标准库里的std::string用起来太方便了，、find、substr，几个操作符和函数…

2026/7/25 0:00:35 阅读更多 →
三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

1. 先搞清楚“三角洲寻宝鼠”到底是什么工具从名称来看，“三角洲寻宝鼠”更像是一个资源查找或文件检索类工具，而不是游戏或娱乐软件。这类工具的核心价值在于帮助用户快速定位特定资源，比如文档、图片、压缩包或特定格式的文件。如果你经常需…

2026/7/25 0:00:35 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/25 5:08:22 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/25 5:13:53 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/24 18:52:18 阅读更多 →

月新闻