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

发布时间：2026/10/20 12:48:54

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/10/20 12:07:31 阅读更多 →
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/10/19 14:57:30 阅读更多 →
物理AI迎来“开悟时刻”：大晓发布开悟世界模型、以人为中心的环采方案2.0与三大行业解决方案

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

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

2026/10/19 23:33:21 阅读更多 →

最新新闻

上下文工程实战指南：从提示词到高质量大模型应用

上下文工程实战指南：从提示词到高质量大模型应用

1. 上下文工程到底是什么，为什么大家都在提1.1 从“提示词”到“上下文工程”先用大白话把这件事说清楚。过去我们聊得最多的是“提示词”，就是告诉模型“帮我写一篇周报”“总结这段文字”，这像是到一个陌生摊位前报菜名。你只说了一句“来碗…

2026/10/20 12:48:35 阅读更多 →
千万级CSV流式导出：零拷贝写入与JVM内存规避方案

千万级CSV流式导出：零拷贝写入与JVM内存规避方案

简介：本资源是一套面向Java中高级开发者的高性能CSV大数据导出实战方案，专为解决千万级数据导出时内存溢出、响应迟滞等生产痛点而设计。方案采用分批处理多线程并行流式写入核心策略，整合Apache Commons CSV或原生BufferedWriter逐行操作&am…

2026/10/20 12:48:35 阅读更多 →
Flutter StatelessWidget vs StatefulWidget 决策指南：状态边界与性能优化

Flutter StatelessWidget vs StatefulWidget 决策指南：状态边界与性能优化

1. 为什么这个问题值得花一整篇来聊——从三个真实翻车现场说起在 Flutter 开发中，“该用 StatelessWidget 还是 StatefulWidget”看起来是个入门级问题，但恰恰是这个看似简单的问题，让不少有 React 或 Vue 经验的开发者栽了跟头。我见过太多…

2026/10/20 12:48:35 阅读更多 →
AI对话落下闳：用大模型重算太初历的时间智慧

AI对话落下闳：用大模型重算太初历的时间智慧

做"AI中国故事"这个系列的时候，我的目标一直很明确：不做一个挂着历史文化名字的语音助手，而是真正把那些被现代人忽略的名字、被算法时代遗忘的计算智慧，用对话的方式重新"活"一遍。系列第一期，我…

2026/10/20 12:48:35 阅读更多 →
AI营销操盘手能力模型与十大品牌选型实战指南

AI营销操盘手能力模型与十大品牌选型实战指南

1. 操盘手和品牌之间，差着一条完整的交付闭环最近总有做企业的朋友问我，AI营销是不是已经变成“买工具就能跑”的赛道了。我做了多年的营销咨询，也在多个项目里亲自下场带过AI营销的完整链路，说实话，这波AI能力升级之后…

2026/10/20 12:48:35 阅读更多 →
2026网络安全就业全景：岗位趋势、薪酬地图与技能风向

2026网络安全就业全景：岗位趋势、薪酬地图与技能风向

1. 为什么我会在年底啃这份招聘数据：调研背景与样本口径每年四季度都是观察次年就业市场最好的窗口期，因为各大公司的HC预算、校招指标、社招编制基本都在这个阶段定调。我做了近十年的安全行业职业发展相关调研，今年选了2025年10月到2026年1…

2026/10/20 12:47:34 阅读更多 →

日新闻

CLRC663芯片Pin-to-Pin替代实战：从评估到量产全记录

CLRC663芯片Pin-to-Pin替代实战：从评估到量产全记录

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
ESP32舵机控制指南：原理、多路驱动与避坑实战

ESP32舵机控制指南：原理、多路驱动与避坑实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →
位移法实现一阶低通滤波：单片机ADC采样降噪实战

位移法实现一阶低通滤波：单片机ADC采样降噪实战

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 1:01:30 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/19 17:32:41 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/20 2:50:50 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:45 阅读更多 →