Tradingview是一个查看股票行情的js组件,支持接入自有数据源,功能完备

申请组件权限

Tradingview组件的github仓库需要到官网申请

进入：https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

然后选择自己想要的库

demo

目录结构

1
2
3

  ├── charting_library //官方提供的组件库
  ├── index.html //主页
  └── src //放置一些js

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE HTML>
<html>
    <head>
        <title>TradingView Charting Library example</title>
        <script
            type="text/javascript"
            src="charting_library/charting_library/charting_library.js">
        </script>


        <script
            type="text/javascript"
            src="charting_library/datafeeds/udf/dist/bundle.js">
        </script>

        <script
            type="text/javascript"
            src="charting_library/datafeeds/udf/dist/polyfills.js">
        </script>

        <!-- Custom datafeed module. -->
        <script type="module" src="src/main.js"></script>
    </head>
    <body style="margin:0px;">
        <div id="tv_chart_container">
            <!-- This div will contain the Charting Library widget. -->
        </div>
    </body>
</html>

src/main.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

window.tvWidget = new TradingView.widget({
    debug: true,
    symbol: 'AAPL', // 默认symbol
    interval: '1D', // 默认的数据间隔
    fullscreen: true, // 是否全屏
    container_id: 'tv_chart_container', // 盒子的id
    locale: "zh",
    timezone: "Asia/Shanghai",
    datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com"),
    library_path: '../charting_library/charting_library/', // 库的相对路径
});

跨域问题解决

参考资料

Tradingview 使用教程_左不言的博客-CSDN博客_tradingview