tradingviewのチャートウィジェットを使って複数チャートを作成する

2021.06.21
Programming 家計・資産運用

チャートを使っていると複数のチャートを同時に表示したマルチプルチャートを使いたいと思うことが多い。

しかし、その機能のあるinvesting.comは重いし、tradingviewの無料版では複数チャートの同時表示ができないといった問題がある。

そこで、tradingviewが無料で提供しているチャートウィジェットとHTMLを使って複数チャート(マルチプルチャート)を自作しようと思う。

1. ウィジェットの取得場所
2. HTMLファイルの作成

ウィジェットの取得場所

tradingviewの提供しているチャートウィジェットはこちらから取得する。(ここでは英語版を使用)

リンク先で好みの指定で取得するチャートの設定を行う。
下記のスクリーンショットが設定画面。ここでWidthとHeightはAutosizeにして埋め込みコードを作っておく。

HTMLファイルの作成

上の方法で取得した埋め込みコードを埋め込むHTMLファイルを作成する。
下のHTMLファイルの<!–TradingView Widget BEGIN –>から<!– TradingView Widget END –>のところに埋め込みコードをいれる。この例だと2行3列の複数チャートが出来上がる。

コードを埋め込む際には、埋め込みコードの”autosize”:”true”,となっている部分を、
“width”:”auto”,”height”:”hoge(任意のサイズ)”に書き換えることをおすすめする。
(こうしないと非常に小さなチャートが表示されてしまう)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  
  <title>Forex Charts</title>
  <style>
   body{ background-color: black;}
   .block-columns{width:100%;}
   .block-column{float:left;
                 width:33%;}
  </style>

 </head>

 <body>
  <div class="block-columns">
   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>
   
   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>

   <div class="block-column">
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
    <!-- TradingView Widget BEGIN -->
    <!-- TradingView Widget END -->
   </div>
  </div>
 </body>
</html>

上記に為替データの埋め込みコードを入力してHTMLファイルを作成し、ブラウザ上で開くとこのようになる。
(実際のHTMLファイルはこちら)