Python Django 金融交易仪表板 — 集成 AnyChart JS 图表-Python教程-PHP中文网

我们很高兴分享一篇关于 EODHD API 的有用文章，其中经验丰富的开发人员和顶级 Medium 作者 Michael Whittle 展示了他如何将我们的 JavaScript 图表库集成到他基于 Python Django 的交易仪表板中。

特别讨论了他将树形图从 D3.js 迁移到 AnyChart 的经验，并解释了为什么他选择我们的解决方案来实现股票图表，强调了直观的代码和增强的功能。

继续阅读，了解如何使用 AnyChart JS 图表提升 Python Django Web 应用程序中的财务数据可视化效果。

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

本文以该系列的前两篇文章为基础，“使用 Python Django 构建金融交易仪表板” 和 “使用 Python Django 增强金融交易仪表板”。

最初，我使用 D3.js 库在登陆页面上创建了树形图。虽然它运行良好，但我想探索其他图表选项，因此我评估了 Chart.js 和 AnyChart。最终，我决定将树形图从 D3.js 迁移到 AnyChart。尽管图表的视觉外观非常相似，但我发现 AnyChart 的代码明显更直观且更易于理解。此外，我个人认为 AnyChart 树形图提供了更多的功能，并且看起来更精致。也就是说，我也喜欢 Chart.js 的美感，它仍然是一个可行的选择。

在上一篇文章中，我创建了一个显示市场历史数据的页面，并使用 Bootstrap 数据表整齐地呈现。在本文中，我想在表格上方添加一个吸引人的股票图表。我再次考虑了这三个图表库，但 AnyChart 呈现数据的方式及其提供的功能给我留下了特别深刻的印象。本文将解释这是如何实现的。

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

最后，我发现了 Bootstrap 中的另一个有用的功能。在上一篇文章中，我演示了如何添加“导出到 Excel”按钮。同样，只需一行代码，您也可以添加一个“打印”按钮。此功能从 Bootstrap 表中获取数据并以易于打印的格式呈现。

Python Django Financial Trading Dashboard — Integrating AnyChart JS Charts

快速跳跃：

更新视图

更新模板 —index.html

更新模板 —历史数据.html

总结

后续步骤

更新视图

我只需对视图进行一项更改即可使历史数据股票图表正常工作。

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 条条目。

为了解决这个问题，我设计了一个简单而有效的解决方案。我确保传递给树形图的值始终是绝对值（正数），并从单元格显示中删除了该值。相反，我将其添加到鼠标悬停时出现的工具提示中。这使得树状图能够以令人愉悦的颜色渐变正确渲染，同时仍然能够在需要时显示实际值。

<html lang="zh-cn">
<头>
  
  
  <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">
<html lang="zh-cn">

<头>
  <title>{{ market }} 的历史数据（{{ Interval }}）</title>
  
  <元名称=“视口”内容=“宽度=设备宽度，初始比例= 1，收缩到适合=否”>

  <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">;
  <链接 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！重要；
    }

    .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>

登录后复制

以上是Python Django 金融交易仪表板 — 集成 AnyChart JS 图表的详细内容。更多信息请关注PHP中文网其他相关文章！