如何在React网站中接入带自定义数据的TradingView图表？

1. 安装依赖 #

直接通过npm安装TradingView官方轻量图表包，适配React项目开发：

npm install @tradingview/lightweight-charts

2. 编写自定义图表组件 #

新建CustomTradingChart.jsx组件，实现图表初始化、自定义数据注入和样式匹配：

import React, { useEffect, useRef } from 'react';
import { createChart } from '@tradingview/lightweight-charts';

const CustomTradingChart = () => {
  const chartContainerRef = useRef(null);
  const chartRef = useRef(null);

  useEffect(() => {
    if (!chartContainerRef.current) return;

    // 初始化图表，匹配深色风格的demo样式
    chartRef.current = createChart(chartContainerRef.current, {
      width: chartContainerRef.current.clientWidth,
      height: 500,
      layout: {
        background: { color: '#131722' },
        textColor: '#d1d4dc',
      },
      grid: {
        vertLines: { color: '#2b2b43' },
        horzLines: { color: '#2b2b43' },
      },
      crosshair: {
        mode: 1, // 启用十字线交互
      },
      rightPriceScale: {
        borderColor: '#485268',
      },
      timeScale: {
        borderColor: '#485268',
        timeVisible: true,
        secondsVisible: false,
      },
    });

    // 添加蜡烛图系列，配置涨跌颜色
    const candleSeries = chartRef.current.addCandlestickSeries({
      upColor: '#4bffb5',
      downColor: '#ff4976',
      borderUpColor: '#4bffb5',
      borderDownColor: '#ff4976',
      wickUpColor: '#4bffb5',
      wickDownColor: '#ff4976',
    });

    // 自定义K线数据，格式必须包含time(秒级时间戳)、open、high、low、close
    const customData = [
      { time: 1640995200, open: 30, high: 32, low: 28, close: 31 },
      { time: 1641081600, open: 31, high: 33, low: 29, close: 32 },
      { time: 1641168000, open: 32, high: 34, low: 30, close: 33 },
      // 可添加更多历史/实时数据
    ];

    // 将数据注入图表
    candleSeries.setData(customData);

    // 监听容器尺寸变化，自适应调整图表宽度
    const handleResize = () => {
      if (chartRef.current && chartContainerRef.current) {
        chartRef.current.applyOptions({ width: chartContainerRef.current.clientWidth });
      }
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理资源
    return () => {
      window.removeEventListener('resize', handleResize);
      chartRef.current?.remove();
    };
  }, []);

  return <div ref={chartContainerRef} style={{ width: '100%', height: '500px' }} />;
};

export default CustomTradingChart;

3. 在项目中引入组件 #

在需要展示图表的页面直接导入并使用：

import CustomTradingChart from './CustomTradingChart';

const App = () => {
  return (
    <div className="App">
      <h2>自定义数据TradingView图表</h2>
      <CustomTradingChart />
    </div>
  );
};

export default App;

4. 样式与功能调整说明 #

• 若要修改背景、文字或网格颜色，直接调整layout和grid的配置参数
• 实时更新数据时，调用candleSeries.update(newDataPoint)方法传入新的K线数据点
• 可通过配置timeScale参数控制时间轴显示内容，比如隐藏时间戳或调整刻度密度

内容的提问来源于stack exchange，提问作者Md Anamul Hoque