[Obsidian]如何將Tradeview 的股票趨示圖嵌入筆記中

Tradeview是一個網上金融市場圖表工具，也是一個交易者與投資者的社群網路，其有提供小工具可以將我們指定的金融商品或指數，嵌入網站內使用，效果如同下面圖示。

而Obsidian的筆記雖可以嵌入HTML語法，但對<SCRIPT>語法有限制，使得我們無法將Tradeview的小工具嵌入，不過Tradeview的小工具除了提供 HTML嵌入碼之外，還提供 REACT的嵌入碼。而Obsidian又提供了 React Components 插件，可以在筆記內執行REACT的嵌入碼，這就提供了可以操作的途徑，設定方式如下:

1. 在 Obsidian 中安裝 React Components 插件

2. 開啟一個空白 note ，加入以下 meta data。

 — -
 defines-react-components: true
 react-components-namespace: projects.test
 — -

如果有安裝 Dataview 插件，也可用 inline 語法。

defines-react-components:: true
react-components-namespace:: projects.test

3. 接下來要定義一個组件，请编寫如下的程式碼。

``` jsx:component:TradingViewWidgets
 [tradeview 的小組件的程式碼要複製在這裡] 
 ```

4. 在 TRADEVIEW 中選擇 更多->商業用述->所有小工具。

5.在小工具裡選擇高級圖表小工具。

6. 在高級圖表小工具裡，設定所要觀看的股票，跟其他相對應的參數後，按Apply 產生代碼, 在 Embed code 中選擇 React，然後按 Copy code 複製程式碼。

7. 將複製下來程式碼中 function TradingViewWidget() 函式區段內的程式碼(只要複製 “function TradingViewWidget() {“頭 跟”}” 內的程式碼，不是全部程式)，貼到第三點所說的區段內，貼起來像下面所示。

```jsx:component:TradingViewWidgets
 const container = useRef(); 
 useEffect( () => { 
  const script = document.createElement(“script”); 
  script.src = “https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js"; 
  script.type = “text/javascript”; 
  script.async = true; 
  script.innerHTML = ` { 
    “width”: “980”, 
    “height”: “610”, 
    “symbol”: “NASDAQ:AAPL”, 
    “interval”: “D”, “timezone”: 
    “Etc/UTC”, “theme”: “light”, 
    “style”: “1”, “locale”: “en”, 
    “allow_symbol_change”: true, 
    “calendar”: false, “support_host”: 
    “https://www.tradingview.com" }`; 
  container.current.appendChild(script); 
  }
  , [] ); 
  return ( <div className=”tradingview-widget-container” 
          ref={container}> 
          <div className=”tradingview-widget-container__widget”></div> 
          <div className=”tradingview-widget-copyright”>
          <a href=”https://www.tradingview.com/" rel=”noopener nofollow” target=”_blank”>
          <span className=”blue-text”>Track all markets on TradingView</span>
          </a></div> </div> );
 ```

8. 然後可以像下面這樣使用組件

```jsx:
 <TradingViewWidgets />
```

或者，使用内聯語法。

`jsx:<TradingViewWidgets/>`

如果有設命名空間，可以用以下方式呼叫組件：

`jsx:<projects.test.TradingViewWidgets/>`

呼叫的結果如下: