在前端开发中，React是非常流行的JavaScript库，而TradingView则是一个知名的金融数据可视化工具。 现在，通过npm包react-tradingview-wrapper，我们可以将这两者结合起来，更加轻松地将TradingView集成到React项目中。
什么是react-tradingview-wrapper ？
react-tradingview-wrapper是一个使用React编写的npm包，它封装了TradingView的官方API，使得开发者可以更加容易地在React中使用TradingView。
具体来说，react-tradingview-wrapper为开发者提供了一个TradingView组件，该组件包含了几乎所有的TradingView配置和功能。开发者只需要将该组件包含到他们的React代码中即可。
安装
要安装react-tradingview-wrapper，需要在命令行中输入以下命令：
npm install react-tradingview-wrapper
安装完成后，你就可以在你的项目中引入此npm包。
使用
在你的React代码中，你可以按以下方式使用react-tradingview-wrapper组件：
-- -------------------- ---- -------
------ ------------------ - ------ - ---- ----------------------------
----- --- - -- -- -
------ -
-----
------------------
---------------
-------------------
--------
--
------
--
--如上所述，我们首先通过import语句引入了我们需要的TradingViewWidget组件。然后，我们在我们的组件层次结构中包含了一个TradingViewWidget组件。
当传递给TradingViewWidget的属性改变时，TradingViewWidget会自动更新显示的数据。出于实现和性能方面的原因，通过此组件属性更新数据时不会重绘整个图表。
组件属性
TradingViewWidget中可以传入的属性非常多，但以下是一些最为常用的属性：
symbol
- type: string
- default: 'BTCUSD'
TradingView中的symbol（交易对）。此属性必须是合法的TradingView symbol编号（例如，AAPL或者XAGUSD）。
theme
- type: string
- default: Themes.DARK
TradingView的主题。此属性必须是TradingView主题之一的字符串。可选值有Themes.DARK、Themes.LIGHT、Themes.CHARTIQ和Themes.BLACK。每个主题都在react-tradingview-wrapper的源代码中有定义。
autosize
- type: boolean
- default: false
指定TradingView是否应该自动调整以适应其被包含在的DOM元素。如果为true，TradingView将扩展到其包含DOM元素的大小。要启用自适应大小，请确保为TradingViewWidget的直接父元素设置了有效的高度和宽度。
interval
- type: string
- default: 'D'
TradingView图表的时间间隔。请参阅TadingView时间间隔文档以获取可用选项。
timeframe
- type: string
- default: '1D'
TradingView图表的时间跨度。请参阅TadingView时间跨度文档以获取可用选项。
toolbar_bg
- type: string
- default: '#f1f3f6'
TradingView图表工具栏的背景颜色。
事件回调
除了属性之外，TradingViewWidget还支持事件回调。这些回调函数将在特定事件中执行。以下是一些常见的回调函数：
onWidgetReady
此回调函数在TradingView图表初始化后执行。
onSymbolChange
当用户更改了当前的TradingView symbol时运行此函数。
onIntervalChange
当用户更改了TradingView时间间隔时运行此函数。
onTimeframeChange
当用户更改了TradingView时间跨度时运行此函数。
onChartReady
当TradingView图表准备就绪并可用于处理的所有数据时，执行此函数。
-- -------------------- ---- -------
------ ------------------ - ------ - ---- ----------------------------
----- --- - -- -- -
----- ---------------- - -- -- -
----- ------- - ---------------------------------------------------- -- -------------------
---------------------------- ----------------- ------
--
------ -
-----
------------------
---------------
-------------------
--------
-------------------------------
--
------
--
--在此示例中，我们定义了一个名为handleChartReady的函数。每当TradingView图表准备好能够处理的所有数据时，这个函数就会运行。在这个函数中，我们使用了窗口内部tvWidget对象的“getAllSeries”方法来获取TradingView中当前正在显示的交易对。
总结
通过npm包react-tradingview-wrapper，我们可以轻松地将TradingView集成到React项目中。此组件提供了各种配置和事件回调，以使开发者可以控制其显示和操作。
在本文中，我们介绍了如何安装和使用react-tradingview-wrapper，特别是如何配置和使用其各种属性，以及如何通过其事件回调捕获各种事件。
希望此教程可以帮助React开发者更加轻松地使用TradingView，促进他们在开发金融可视化应用程序时的创新和成功。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005761781e8991b448ea8d7