iTick股票API与Tradingview图表结合实现Kline实时绘制|TradingView 图表集成教程

iTick TradingView 图表集成教程

简介

本教程将指导您如何使用 iTick 的股票 API 和 TradingView 的图表库创建专业的交易图表应用。iTick 提供可靠的股票、外汇、加密货币和指数的市场数据，而 TradingView 则提供强大的图表功能。

前置要求

Node.js 16 或更高版本
JavaScript 基础知识
iTick API 账号和令牌
TradingView 图表库

第一步：项目设置

首先，创建一个新项目：

mkdir itick-tradingview-chart
cd itick-tradingview-chart
npm init -y

安装必要的依赖：

npm install --save express webpack webpack-cli webpack-dev-server

第二步：项目结构

创建以下目录结构：

itick-tradingview-chart/
├── src/
│   ├── assets
│       └── charting_library/ # TradingView 库文件
│   └── index.js
├── package.json
├── README.md
└── index.html

第三步：获取 iTick API 令牌

访问 iTick 官网 https://www.itick.org
点击右上角的"立即获取"
注册/登录您的账号
点击头像进入控制台
复制您的 API 令牌

第四步：配置 API_KEY 实现

在 src/index.js 文件中替换申请到的 API_KEY ：

import UDFCompatibleDatafeed from './UDFCompatibleDatafeed.js'
// 谨慎用试用的令牌，可能存在过期问题
const key = 'API_KEY'
new TradingView.widget({
  debug: false,
  fullscreen: false,
  symbol: 'HK:700',
  interval: '1',
  container: 'tradingview-container',
  datafeed: new UDFCompatibleDatafeed(key),
  library_path: '/charting_library/',
  locale: 'zh',
  autosize: true,
  width: window.innerWidth,
  height: window.innerHeight,
  disabled_features: ['use_localstorage_for_settings'],
  enabled_features: [
    'pre_post_market_sessions',
    'show_symbol_logos',
    'show_exchange_logos',
    'seconds_resolution',
    'custom_resolutions',
    'secondary_series_extend_time_scale',
    'show_percent_option_for_right_margin',
    'items_favoriting',
    'disable_resolution_rebuild'
  ],
  // overrides,
  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, // 时区
  theme: 'light', // 主题设置
  loading_screen: '#FFFFFF' // 加载时的背景颜
})