TrendingViewと同じチャートを自分のサイトで使う

TrendingViewと同じチャートを自分のサイトで使う

TrendingViewって知っていますか?

株や仮想通貨などのリアルタイムチャートを見ることができるサイトです。

100を超えるテクニカル分析が使える高性能チャートを使用できます。

 

実際の画面がこちら(ダークモード適用)

 

とてもきれいですよね。

TrendingViewのチャートを眺めてて思ったのが、**これと同じチャートを自分のサイトで使えないだろうか?**というもの

 

結論から言うとTrendingViewと同じチャートを使って独自のデータをグラフで可視化することは可能です。

 

TrendingViewは独自のチャートを用いていますが、それを他の人も簡単に利用できるようにオープンソースで公開してくれています。

今回はTrendingViewのチャートを自分のサイトで使う方法を簡単にまとめました。

TrendingViewと同じチャートを簡単に使える

TrendingViewは誰でも同じチャートを使えるように「Lightweight Chats」というチャートライブラリを公開しています。

 

Lightweight Charts™ library — TradingView
Top performance in a tiny package. Free, open-source and feature-rich. At just 45 kilobytes, the dream of super compact interactive charts is now a reality.
Lightweight Charts™ library — TradingView favicon www.tradingview.com
Lightweight Charts™ library — TradingView

 

TrendingViewのサイトで使われているチャートとほぼ同じものを誰でも簡単に使うことができるようになっています。

ライブラリは非常に軽量で、4Kb

TrendingViewのようにリアルタイムでチャートを更新させることができる

ハイパフォーマンス巨大なデータにも対応している(数千単位)

Lightweight Chartsには、このような特徴があります。

次に初心者向けにLightweight Chartsの使い方を紹介します。

「Lightweight Charts」の使い方

今回はCDNを使った方法でやります。

htmlで「Lightweight Charts」のライブラリを読み込みます。

 

ライブラリのURL

https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js

 

読み込む際は

<script type="text/javascript" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>

 

あとはJavaScriptでライブラリにチャートに表示したいデータを渡したり、チャートの見栄えをカスタマイズしていくことになります。

 

カスタマイズやデータの渡し方は、Lightweight Chartsのサイトに載っている例を参考にするといいでしょう

 

好みのサンプルがあれば、クリックしてコードを確認できます。

あとは自分のhtmlにここに書かれているjsとcssを組み込めば、同じものが表示されます。