vue中如何使用TradingView （正文）

最新推荐文章于 2025-04-23 12:00:40 发布

Call_me_small_pure

最新推荐文章于 2025-04-23 12:00:40 发布

阅读量6.6k

点赞数 1

分类专栏： TradingView 文章标签： vue TradingView

路漫漫其修远兮，吾将上下而求索～

本文链接：https://blog.youkuaiyun.com/Call_me_small_pure/article/details/81240120

版权

本文介绍了如何在Vue项目中使用TradingView。首先从官网获取必要的文件并存放在static文件夹下，然后在项目的index.html中引入这些文件。为了自定义样式，可以在charting_library的static目录下创建自定义CSS。示例代码展示了使用UDF（User-Defined Functions）的方式，UDF通过HTTP协议从数据库获取数据。 TradingView的UDF适用于创建小型HTTP服务来响应图表库的数据请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去官网下载完文件包之后（详见上一篇），通过index.html文件，知道以下三个文件是必须要引入的文件和文件库

charting_library	  /*文件夹*/
polyfills.js		/*js文件*/
bundle.js		/*js文件*/

现在要做的就是把html文件转成vue组件

把以上三个js文件与文件库放到vue根目录下的static文件夹下
把Tv中在index.html中引入的三个文件，通过vue根目录下面的入口文件index.html引入（在组件中引入很产生错误）
如果要自定义css,最好在charting_library文件下面的static目录下新建自定义css文件
上代码，方法参数可以参照API

注意：此demo 是UDF，
什么是UDF？UDF是基于HTTP协议的旨在以简单有效的方式向图表库提供数据。
该怎么使用它? 您应该创建小型的HTTP服务，让它从您的数据库中获取数据并响应图表库请求

说白了就是通过http 请求获取数据，另一种是websocket通过后台推送获取数据（websocket参照文档JS API）

中文API链接

<template>
    <div id="tv_chart_container" style="width: 652px;height: 350px;margin:auto"></div>
</template>

&l

最低0.47元/天解锁文章