Python Django 金融交易儀表板 — 整合 AnyChart JS 圖表

我們很高興分享一篇關於 EODHD API 的有用文章，其中經驗豐富的開發人員和頂級 Medium 作者 Michael Whittle 展示了他如何將我們的 JavaScript 圖表庫整合到他基於 Python Django 的交易儀表板中。

特別討論了他將樹形圖從 D3.js 遷移到 AnyChart 的經驗，並解釋了為什麼他選擇我們的解決方案來實現股票圖表，強調了直觀的代碼和增強的功能。

繼續閱讀，了解如何使用 AnyChart JS 圖表提升 Python Django Web 應用程式中的財務資料視覺化效果。

---

本文以該系列的前兩篇文章為基礎，「使用 Python Django 建立金融交易儀表板」 和 「使用 Python Django 增強金融交易儀表板」。

最初，我使用 D3.js 函式庫在登陸頁面上建立了樹狀圖。雖然它運作良好，但我想探索其他圖表選項，因此我評估了 Chart.js 和 AnyChart。最終，我決定將樹狀圖從 D3.js 遷移到 AnyChart。儘管圖表的視覺外觀非常相似，但我發現 AnyChart 的程式碼明顯更直觀且更易於理解。此外，我個人認為 AnyChart 樹形圖提供了更多的功能，並且看起來更精緻。也就是說，我也喜歡 Chart.js 的美感，它仍然是一個可行的選擇。

在上一篇文章中，我建立了一個顯示市場歷史資料的頁面，並使用 Bootstrap 資料表整齊地呈現。在本文中，我想在表格上方新增一個吸引人的股票圖表。我再次考慮了這三個圖表庫，但 AnyChart 呈現數據的方式及其提供的功能給我留下了特別深刻的印象。本文將解釋這是如何實現的。

最後，我發現了 Bootstrap 中的另一個有用的功能。在上一篇文章中，我示範如何新增「匯出到 Excel」按鈕。同樣，只需一行程式碼，您也可以新增一個「列印」按鈕。此功能可從 Bootstrap 表中取得資料並以易於列印的格式呈現。

快速跳躍：

1. 更新視圖
2. 更新範本 —index.html
3. 更新範本 —歷史資料.html
4. 總結
5. 後續步驟

更新視圖

我只需對視圖進行一項更改即可使歷史數據股票圖表正常工作。

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")
      ),
    },
  )

如果您密切注意函數的輸出，您會注意到我已將資料分為兩部分。第一個「historical_data」包含 API 傳回的原始數據，用於 Bootstrap 資料表。第二個「historical_data_json」是 AnyChart 股票圖表所需的 JSON 格式資料的清理版本。讓這個工作實際上非常具有挑戰性。我想提供兩種視覺化歷史資料的方法，但每種方法都需要不同格式的資料。事實證明，這種方法是一個有效的解決方案。

更新模板-index.html

如我上面所提到的，我最初的樹狀圖使用了 D3.js 函式庫。我評估了 Chart.js 和 AnyChart 函式庫。我發現 AnyChart 庫非常先進，而且看起來更好、更精緻。我在下面添加了轉換後的程式碼。

陷阱

我遇到了一個最奇怪的錯誤，讓我困惑了好幾天。當我最初將樹形圖程式碼從 D3.js 轉換為 AnyChart 時，它運行得非常完美。然後，我將注意力轉移到歷史數據股票圖表，但當我回到 AnyChart 樹狀圖時，它無法正確呈現。儘管 API 正在接收 110 個市場指數的數據，但只有 11 個正在顯示。

為了調試這個，我必須將程式碼精簡為最簡單的元件。事實證明，「問題」與我將 daily_return 作為樹形圖的值包含在內有關。我選擇使用 daily_return 而不是成分數量，因為它在高值和低值之間創建了更具視覺吸引力的顏色漸變。然而，我發現樹形圖需要正數作為值才能正確渲染——這就是它們的工作原理。

當我最初開始運作時，市場狀況一定非常好，因為所有每日回報都是正值。幾天后，當我重新訪問代碼時，一些每日回報為負，這導致只顯示 11 個條目。

為了解決這個問題，我設計了一個簡單而有效的解決方案。我確保傳遞給樹形圖的值始終是絕對值（正數），並從單元格顯示中刪除了該值。相反，我將其添加到滑鼠懸停時出現的工具提示中。這使得樹狀圖能夠以令人愉悅的顏色漸變正確渲染，同時仍能在需要時顯示實際值。

  
  
  <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>
  
  
  更新範本 — Historical_data.html
</h3>

<p>下一部分是在歷史資料 Bootstrap 表上方新增 AnyChart 股票圖表。正如我上面提到的，我還添加了“列印”按鈕，這可能很方便。 </p>

<p>我發現 Chart.js 和 AnyChart 都有非常令人愉悅的功能豐富的圖表。我決定使用 AnyChart，因為我不想在應用程式中混合使用庫，但我也非常喜歡圖表的外觀。 </p>

<p>我真正喜歡的是圖表是互動的。您可以平移、縮放資料點並將滑鼠懸停在資料點上以獲取更多資訊。當股票開始時，您還可以像大多數交易應用程式一樣看到直觀地表示的燭台。如果收盤價高於開盤價，則顯示綠色條；如果收盤價低於開盤價，則顯示紅色汽車。 <br>
</p>
<pre class="brush:php;toolbar:false">



  <title>{{ market }} 的歷史資料（{{ Interval }}）</title>
  
  

  <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">;
  

  
    身體 {
      背景顏色：#343a40；
      顏色：#ffffff；
    }

    。桌子 {
      背景顏色：#212529；
    }

    .table th, .table td {
      顏色：#ffffff；
    }

    .chart-container {
      下邊距：20px；
    }

    .dt-按鈕 .btn {
      右邊距：10px；
    }

    .page-item.active .page-link {
      z 索引：3；
      顏色：#ffffff！重要；
      背景顏色：#495057！重要；
      邊框顏色：#495057！重要；
    }

    .page-link {
      顏色：#ffffff！重要；
      背景顏色：#6c757d！重要；
      邊框顏色：#343a40！重要；
    }

    .page-link:懸停{
      顏色：#adb5bd！重要；
      背景顏色：#5a6268！重要；
      邊框顏色：#343a40！重要；
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      顏色：#ffffff！重要；
      背景顏色：#6c757d！重要；
      邊框：1px 實線#343a40！重要；
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button：懸停{
      背景顏色：#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：懸停{
      背景顏色：#6c757d！重要；
      顏色：#ffffff！重要；
    }

    .btn-暗{
      背景顏色：#6c757d！重要；
      邊框顏色：#6c757d！重要；
      顏色：#ffffff！重要；
    }

    .btn-dark:懸停{
      背景顏色：#5a6268！重要；
      邊框顏色：#5a6268！重要；
    }
  風格>
頭>


  <div>



<h3>
  
  
  概括
</h3>

<p>我發現 AnyChart 的 JavaScript 圖表庫的程式碼易於閱讀和理解。但是，圖表顯示「試用版」浮水印。購買許可證可以刪除此浮水印並提供額外的支援。儘管如此，試用版對我來說運作良好。 </p>
<h3>
  
  
  下一步
</h3>

<p>本系列的下一篇文章將探討將基本數據和市值合併到應用程式中。 </p>


<hr>

<p><em><strong>最初於 2024 年 11 月在金融資料 API 一站式商店 EODHD.com 上發布，標題為「AnyChart 與 Python Django 的金融交易儀表板整合」。 </strong></em></p>

<p><em><strong>由 Michael Whittle 撰寫，他是一位擁有二十多年經驗的解決方案架構師、開發人員和分析師，也是 Medium 上的頂級作者。 </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>