Python Django 金融取引ダッシュボード — AnyChart JS チャートの統合

EODHD API に関して見つけた役立つ記事を共有できることを嬉しく思います。この記事では、経験豊富な開発者であり、Medium のトップ著者である Michael Whittle が、JavaScript チャート ライブラリを Python Django ベースの取引ダッシュボードにどのように統合したかを示しています。

特に、ツリーマップを D3.js から AnyChart に移行した経験について説明し、直感的なコードと強化された機能を強調しながら、株価チャートの実装に当社のソリューションを選んだ理由を説明します。

AnyChart JS Charts を使用して、Python Django Web アプリケーションで財務データの視覚化を強化する方法について説明します。

---

この記事は、このシリーズの前の 2 つの記事、「Python Django を使用して金融取引ダッシュボードを構築する」 と 「Python Django を使用して金融取引ダッシュボードを強化する」 に基づいて構築されています。

最初に、D3.js ライブラリを使用してランディング ページにツリーマップを作成しました。これはうまく機能しましたが、他のグラフ作成オプションを検討したかったので、Chart.js と AnyChart の両方を評価しました。最終的に、ツリーマップを D3.js から AnyChart に移行することにしました。グラフの外観は非常に似ていますが、AnyChart のコードの方がはるかに直感的で理解しやすいことがわかりました。さらに、個人的には、AnyChart ツリーマップの方が機能がわずかに多く、より洗練されているように見えます。そうは言っても、私は Chart.js の美しさも気に入っており、これは依然として実行可能な選択肢です。

前の記事では、Bootstrap データ テーブルを使用してきちんと表示された、市場の履歴データを表示するページを作成しました。この記事では、表の上に魅力的な株価チャートを含めたいと思いました。もう一度、3 つのグラフ作成ライブラリを検討しましたが、AnyChart のデータ表示方法とそれが提供する機能に特に感銘を受けました。この記事では、これがどのようにして実現されたのかについて説明します。

最後に、Bootstrap で利用できるもう 1 つの便利な機能を発見しました。前回の記事では、「Excel にエクスポート」ボタンを追加する方法を説明しました。同様に、たった 1 行のコードで「印刷」ボタンを追加することもできます。この機能は、Bootstrap テーブルからデータを取得し、印刷しやすい形式で表示します。

クイックジャンプ:

1. ビューの更新
2. テンプレートの更新 —index.html
3. テンプレートの更新 —history_data.html
4. 概要
5. 次のステップ

ビューの更新

履歴データの株価チャートを機能させるには、ビューに 1 回の変更を加えるだけで済みました。

def fetch_historical_data(request, market, interval):
  now = datetime.now()

  if interval in ["m", "w", "d"]:
    end_date = now.date().isoformat()
    start_date = (now - timedelta(days=300)).date().isoformat()
  else:
    end_date = now.strftime("%Y-%m-%dT%H:%M")
    start_date = (now - timedelta(hours=300)).strftime("%Y-%m-%dT%H:%M")

  start_date = request.GET.get("from", start_date)
  end_date = request.GET.get("to", end_date)

  def parse_datetime(dt_str):
    try:
      return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M:%S")
    except ValueError:
      try:
        return datetime.strptime(dt_str, "%Y-%m-%dT%H:%M")
      except ValueError:
        return datetime.strptime(dt_str, "%Y-%m-%d")

  start_date_parsed = parse_datetime(start_date)
  end_date_parsed = parse_datetime(end_date)

  if interval in ["m", "w", "d"]:
    start_date = start_date_parsed.strftime("%Y-%m-%d")
    end_date = end_date_parsed.strftime("%Y-%m-%d")
  else:
    start_date_unix = int(start_date_parsed.timestamp())
    end_date_unix = int(end_date_parsed.timestamp())

  endpoint = "eod" if interval in ["m", "w", "d"] else "intraday"
  interval_type = "period" if interval in ["m", "w", "d"] else "interval"

  if interval not in ["m", "w", "d"]:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date_unix}&to={end_date_unix}&api_token={settings.EODHD_API_TOKEN}&fmt=json"
  else:
    url = f"https://eodhd.com/api/{endpoint}/{market}?{interval_type}={interval}&from={start_date}&to={end_date}&api_token={settings.EODHD_API_TOKEN}&fmt=json"

  print(url)
  response = requests.get(url)
  data = response.json()

  def format_unix_timestamp(unix_ts):
    return datetime.utcfromtimestamp(unix_ts).strftime("%Y-%m-%d %H:%M:%S")

  for entry in data:
    if "date" in entry:
      entry["timestamp"] = entry.pop("date")
    elif "datetime" in entry:
      datetime_value = entry.pop("datetime")
      try:
        entry["timestamp"] = format_unix_timestamp(int(datetime_value))
      except ValueError:
        entry["timestamp"] = datetime_value

  if not data or "error" in data:
    data = []

  raw_data = data
  historical_data_json = json.dumps(data)

  return render(
    request,
    "historical/historical_data.html",
    {
      "market": market,
      "interval": interval,
      "historical_data": raw_data,  # Raw Python data for the table
      "historical_data_json": historical_data_json,  # JSON for the script
      "start_date": (
        start_date
        if interval in ["m", "w", "d"]
        else start_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
      "end_date": (
        end_date
        if interval in ["m", "w", "d"]
        else end_date_parsed.strftime("%Y-%m-%dT%H:%M")
      ),
    },
  )

関数の出力に細心の注意を払うと、データが 2 つの部分に分割されていることがわかります。最初の「historyal_data」には、API によって返された生データが含まれており、ブートストラップ データ テーブルに使用されます。 2 番目の「historyal_data_json」は、AnyChart 株価チャートに必要な JSON 形式のデータのサニタイズされたバージョンです。これを機能させるのは実際には非常に困難でした。履歴データを視覚化する 2 つの方法を提供したいと考えましたが、それぞれに異なる形式のデータが必要でした。このアプローチは効果的な解決策であることが判明しました。

テンプレートの更新 —index.html

上で述べたように、私の最初のツリーマップでは D3.js ライブラリを使用しました。 Chart.js ライブラリと AnyChart ライブラリの両方を評価しました。 AnyChart ライブラリは主導権があり、見た目もはるかに素晴らしく洗練されていることがわかりました。以下に変換されたコードを含めました。

注意事項

私は数日間私を困惑させた最も奇妙なバグの 1 つに遭遇しました。最初にツリーマップ コードを D3.js から AnyChart に変換したとき、問題なく動作しました。次に、履歴データの株価チャートに焦点を移しましたが、AnyChart ツリーマップに戻ると、正しくレンダリングされていませんでした。 API は 110 の市場指数のデータを受信して​​いましたが、表示されていたのは 11 指数のみでした。

これをデバッグするには、コードを最も単純なコンポーネントまで削除する必要がありました。結局のところ、この「問題」は、ツリーマップの値として daily_return を含めたことに関連していました。構成要素の数の代わりに daily_return を使用することを選択しました。これは、高い値と低い値の間でより視覚的に魅力的な色のグラデーションを作成するためです。しかし、ツリーマップが正しくレンダリングするには、値として正の数値が必要であることがわかりました。それが単にツリーマップの仕組みです。

私が最初にそれを動かし始めたとき、毎日の収益はすべてプラスだったので、市況は非常に良好だったに違いありません。数日後にコードを再確認したときには、日次の収益の一部がマイナスになっており、そのため 11 個のエントリしか表示されませんでした。

これに対処するために、私はシンプルだが効果的な解決策を考案しました。ツリーマップに渡される値が常に絶対値 (正の数) であることを確認し、この値をセル表示から削除しました。代わりに、マウスホバー時に表示されるツールチップに追加しました。これにより、必要に応じて実際の値を表示しながら、ツリーマップを適切な色のグラデーションで正しくレンダリングできるようになりました。

  
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>市場指数のツリーマップ</title>

  https://cdn.anychart.com/releases/8.13.0/js/anychart-bundle.min.js
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  
    体 {
      背景色: #343a40;
      色: #ffffff;
    }
    #ツリーマップ {
      幅: 100%;
      高さ: 80vh;
      マージン: 0 自動;
    }
  スタイル>



  <div>



<h3>
  
  
  テンプレートの更新 —history_data.html 
</h3>

<p>次の部分は、AnyChart 株価チャートを履歴データの Bootstrap テーブルの上に追加することでした。上で述べたように、便利な「印刷」ボタンも追加しました。</p>

<p>Chart.js と AnyChart の両方に、非常に快適な機能が豊富なグラフがあることがわかりました。アプリ内でライブラリを混在させたくないため、AnyChart を使用することにしましたが、グラフの見た目も非常に気に入っていました。</p>

<p>本当に良いのは、グラフがインタラクティブであることです。データ ポイントをパン、ズーム、マウス オーバーすると、追加情報が表示されます。株式のスタート時には、ほとんどの取引アプリケーションと同様に視覚的に表現されたローソク足を確認することもできます。終値が始値より高い場合は緑色のバー、終値が始値より低い場合は赤色の車。<br>
</p>
<pre class="brush:php;toolbar:false">



  <title>{{ マーケット }} ({{ 間隔 }}) の履歴データ</title>
  
  <meta name="viewport" content="width=device-width、initial-scale=1、shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap4.min.css">

  
    体 {
      背景色: #343a40;
      色: #ffffff;
    }

    。テーブル {
      背景色: #212529;
    }

    .table th、.table td {
      色: #ffffff;
    }

    .chart-container {
      マージン-ボトム: 20px;
    }

    .dt-ボタン .btn {
      右マージン: 10px;
    }

    .page-item.active .page-link {
      z インデックス: 3;
      色: #ffffff !重要;
      背景色: #495057 !重要;
      境界線の色: #495057 !重要;
    }

    .ページリンク {
      色: #ffffff !重要;
      背景色: #6c757d !重要;
      境界線の色: #343a40 !重要;
    }

    .page-link:hover {
      色: #adb5bd !重要;
      背景色: #5a6268 !重要;
      境界線の色: #343a40 !重要;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      色: #ffffff !重要;
      背景色: #6c757d !重要;
      境界線: 1px 実線 #343a40 !重要;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
      背景色: #5a6268 !重要;
      境界線: 1px 実線 #343a40 !重要;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      色: #ffffff !重要;
      背景色: #495057 !重要;
      境界線: 1px 実線 #343a40 !重要;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled、
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      背景色: #6c757d !重要;
      色: #ffffff !重要;
    }

    .btn-dark {
      背景色: #6c757d !重要;
      境界線の色: #6c757d !重要;
      色: #ffffff !重要;
    }

    .btn-dark:ホバー {
      背景色: #5a6268 !重要;
      境界線の色: #5a6268 !重要;
    }
  スタイル>



  <div>



<h3>
  
  
  まとめ 
</h3>

<p>AnyChart の JavaScript グラフ作成ライブラリのコードは読みやすく、理解しやすいと思います。ただし、グラフには「試用版」のウォーターマークが表示されます。ライセンスを購入すると、このウォーターマークが削除され、追加のサポートが提供されます。それにもかかわらず、試用版は私にとってはうまく機能しました。</p>
<h3>
  
  
  次のステップ 
</h3>

<p>シリーズの次の記事では、基礎データと時価総額をアプリケーションに組み込む方法について説明します。</p>


<hr>

<p><em><strong>元々は、金融データ API のワンストップ ショップである EODHD.com で、2024 年 11 月に「Python Django を使用した金融取引ダッシュボードの AnyChart 統合」というタイトルで公開されました。</strong></em></p>

<p><em><strong>20 年以上の経験を持つソリューション アーキテクト、開発者、アナリストであり、Medium のトップ 著者である Michael Whittle によって書かれました。</strong></em></p>


<hr>

<h2>
  
  
  AnyChart の便利なリンク
</h2>

<ul>
<li> ツリーマップ チャート — Chartopedia
</li>
<li> 株価チャート — Chartopedia
</li>
<li> ツリーマップ グラフの作成方法 — JavaScript グラフ作成チュートリアル
</li>
<li> 株価チャートの作成方法 — JavaScript チャート作成チュートリアル
</li>
<li> Python / Django / MySQL — 統合テンプレート
</li>
<li> Python / Flask / MySQL — 統合テンプレート
</li>
<li> ビジネス ソリューションとダッシュボード
</li>
</ul>


          </div>