尧图网站建设 
TradingVue.js 实战指南把任意数据画到 K 线交易图表上【免费下载链接】trading-vue-js Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]项目地址: https://gitcode.com/gh_mirrors/tr/trading-vue-js你看了多年 TradingView 行情开源图表库却总差一口气。想加个自定义标记得跟 API 斗智斗勇。TradingVue.js 是基于 Vue 的开源交易图表库。它的核心是数据到屏幕映射任何数据都能画到 K 线上。读完本文你会知道它怎么跑起来、覆盖层和脚本怎么写。项目名片TradingVue.js 是一个基于 Vue 2 的开源交易图表库。核心理念是 DSM即数据到屏幕映射库负责滚动、缩放、重绘你只管把数据变成像素。它解决传统图表库改不动的问题。K 线、指标、信号标记甚至图上的一只笑脸都能自己画。跑起来最小可运行示例先看官方最小例子整个流程就三步装库、贴组件、喂数据。先装库npm i trading-vue-js。要跑仓库里的完整示例执行git clone https://gitcode.com/gh_mirrors/tr/trading-vue-js装完依赖跑npm run test。下面这段组件是官方最小可运行代码数据就是一组 OHLCV 数组template trading-vue :datathis.$data/trading-vue /template script import TradingVue from trading-vue-js export default { components: { TradingVue }, data() { return { ohlcv: [[1551128400000, 33, 37.1, 14, 14, 196], [1551132000000, 13.7, 30, 6.6, 30, 206]] } } } /script页面里会画出两根 K 线。十字光标、图例、滚轮缩放全都自带。核心能力拆解下面挑三个最能体现差异化的能力数据映射、自定义覆盖层、脚本引擎。数据到屏幕映射DSM整个库的底层就是一组函数把时间和价格互相翻译成屏幕坐标。写在覆盖层的 draw 方法里配合原生 canvas 就能出图const layout this.$props.layout const x layout.t2screen(t) // 时间 - 屏幕 X const y layout.$2screen(p) // 价格 - 屏幕 Y const price layout.screen2$(y) // 屏幕 Y - 价格反向映射同样有鼠标坐标能翻回时间和价格做交互时很顺手。五个函数加 canvas画什么都由你说了算。自定义覆盖层实战每个覆盖层就是一个 Vue 组件没有 template只有 draw。数据里写一条type: EMA库就自动找这个组件渲染import { Overlay } from trading-vue-js export default { mixins: [Overlay], methods: { draw(ctx) { const layout this.$props.layout ctx.beginPath() for (const p of this.$props.data) { ctx.lineTo(layout.t2screen(p[0]), layout.$2screen(p[1])) } ctx.stroke() }, use_for() { return [EMA] } } }颜色、图例、z 序都从 settings 读。数据一进来线就自动画上了。这也是一个覆盖层 一个 .vue 文件的意思注册即用想换实现随时换。脚本系统不碰 canvas 也能出指标更进一步库内置了类 PINE 的脚本引擎。ema、bb、atr 这些标准函数全是现成的。覆盖层里写个 calc指标就算出来了calc() { return { update: let res [] for (var i 0; i number; i) { res.push(ema(close, start i * step)[0]) } return res } }每组均线实时跟随最新 K 线更新一行 canvas 代码都不用写。但真正有意思的是官方教程的第一个覆盖层叫 Grin。它就是一张画在 K 线上的笑脸画任何东西不是营销话术。进阶技巧与性能跑起来之后两个问题最常被问到数据大了怎么办、功能不够怎么办。大数据与性能优化大数据量下卡顿多半是覆盖层写法的问题。官方数据是 300 万根 K 线仍可运行。自己的代码想跟上记住这几条大 K 线数据先采样再绘制draw 里只绘制计算提前做用离屏 canvas 缓存静态内容覆盖层只拿得到可见区间的数据切片。缩放平移不会触发全屏重算这是它快的根本原因。扩展机制脚本与插件不想从零写渲染还有两条扩展路径脚本引擎写指标语法类似 PINE扩展包注入组件、覆盖层、皮肤配色包与皮肤一键换 UI 风格扩展通过 extensions prop 注入。核心保持轻量生态在外面长。常见陷阱速查官方 FAQ 里高频的坑基本都是数据问题。先查这几行现象原因解法白屏无内容数据缺 chart 字段补上 chart 配置图表错位或闪烁K 线未按时序排列数据按时间升序周末出现大空隙时间轴模式下股票数据开启 indexBased多实例互相干扰多个组件共用 id每个实例唯一 id脚本输出 NaN变量未定义或除零用 nz() 兜底更多问答在仓库 docs/faq 目录按关键词翻即可。适合谁 / 下一步TradingVue.js 的定位是给需要深度定制交易图表的量化开发者和交易软件团队用的渲染引擎不是开箱即用的 SaaS。建议先跑通 test 目录下的示例再照 docs/guide 里的脚本指南写第一个自定义指标。项目已标注停止维护但源码和文档完整拿来学习或私有二开正合适。【免费下载链接】trading-vue-js Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]项目地址: https://gitcode.com/gh_mirrors/tr/trading-vue-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TradingVue.js 实战指南：把任意数据画到 K 线交易图表上
TradingVue.js 实战指南把任意数据画到 K 线交易图表上【免费下载链接】trading-vue-js Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]项目地址: https://gitcode.com/gh_mirrors/tr/trading-vue-js你看了多年 TradingView 行情开源图表库却总差一口气。想加个自定义标记得跟 API 斗智斗勇。TradingVue.js 是基于 Vue 的开源交易图表库。它的核心是数据到屏幕映射任何数据都能画到 K 线上。读完本文你会知道它怎么跑起来、覆盖层和脚本怎么写。项目名片TradingVue.js 是一个基于 Vue 2 的开源交易图表库。核心理念是 DSM即数据到屏幕映射库负责滚动、缩放、重绘你只管把数据变成像素。它解决传统图表库改不动的问题。K 线、指标、信号标记甚至图上的一只笑脸都能自己画。跑起来最小可运行示例先看官方最小例子整个流程就三步装库、贴组件、喂数据。先装库npm i trading-vue-js。要跑仓库里的完整示例执行git clone https://gitcode.com/gh_mirrors/tr/trading-vue-js装完依赖跑npm run test。下面这段组件是官方最小可运行代码数据就是一组 OHLCV 数组template trading-vue :datathis.$data/trading-vue /template script import TradingVue from trading-vue-js export default { components: { TradingVue }, data() { return { ohlcv: [[1551128400000, 33, 37.1, 14, 14, 196], [1551132000000, 13.7, 30, 6.6, 30, 206]] } } } /script页面里会画出两根 K 线。十字光标、图例、滚轮缩放全都自带。核心能力拆解下面挑三个最能体现差异化的能力数据映射、自定义覆盖层、脚本引擎。数据到屏幕映射DSM整个库的底层就是一组函数把时间和价格互相翻译成屏幕坐标。写在覆盖层的 draw 方法里配合原生 canvas 就能出图const layout this.$props.layout const x layout.t2screen(t) // 时间 - 屏幕 X const y layout.$2screen(p) // 价格 - 屏幕 Y const price layout.screen2$(y) // 屏幕 Y - 价格反向映射同样有鼠标坐标能翻回时间和价格做交互时很顺手。五个函数加 canvas画什么都由你说了算。自定义覆盖层实战每个覆盖层就是一个 Vue 组件没有 template只有 draw。数据里写一条type: EMA库就自动找这个组件渲染import { Overlay } from trading-vue-js export default { mixins: [Overlay], methods: { draw(ctx) { const layout this.$props.layout ctx.beginPath() for (const p of this.$props.data) { ctx.lineTo(layout.t2screen(p[0]), layout.$2screen(p[1])) } ctx.stroke() }, use_for() { return [EMA] } } }颜色、图例、z 序都从 settings 读。数据一进来线就自动画上了。这也是一个覆盖层 一个 .vue 文件的意思注册即用想换实现随时换。脚本系统不碰 canvas 也能出指标更进一步库内置了类 PINE 的脚本引擎。ema、bb、atr 这些标准函数全是现成的。覆盖层里写个 calc指标就算出来了calc() { return { update: let res [] for (var i 0; i number; i) { res.push(ema(close, start i * step)[0]) } return res } }每组均线实时跟随最新 K 线更新一行 canvas 代码都不用写。但真正有意思的是官方教程的第一个覆盖层叫 Grin。它就是一张画在 K 线上的笑脸画任何东西不是营销话术。进阶技巧与性能跑起来之后两个问题最常被问到数据大了怎么办、功能不够怎么办。大数据与性能优化大数据量下卡顿多半是覆盖层写法的问题。官方数据是 300 万根 K 线仍可运行。自己的代码想跟上记住这几条大 K 线数据先采样再绘制draw 里只绘制计算提前做用离屏 canvas 缓存静态内容覆盖层只拿得到可见区间的数据切片。缩放平移不会触发全屏重算这是它快的根本原因。扩展机制脚本与插件不想从零写渲染还有两条扩展路径脚本引擎写指标语法类似 PINE扩展包注入组件、覆盖层、皮肤配色包与皮肤一键换 UI 风格扩展通过 extensions prop 注入。核心保持轻量生态在外面长。常见陷阱速查官方 FAQ 里高频的坑基本都是数据问题。先查这几行现象原因解法白屏无内容数据缺 chart 字段补上 chart 配置图表错位或闪烁K 线未按时序排列数据按时间升序周末出现大空隙时间轴模式下股票数据开启 indexBased多实例互相干扰多个组件共用 id每个实例唯一 id脚本输出 NaN变量未定义或除零用 nz() 兜底更多问答在仓库 docs/faq 目录按关键词翻即可。适合谁 / 下一步TradingVue.js 的定位是给需要深度定制交易图表的量化开发者和交易软件团队用的渲染引擎不是开箱即用的 SaaS。建议先跑通 test 目录下的示例再照 docs/guide 里的脚本指南写第一个自定义指标。项目已标注停止维护但源码和文档完整拿来学习或私有二开正合适。【免费下载链接】trading-vue-js Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]项目地址: https://gitcode.com/gh_mirrors/tr/trading-vue-js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考