Python Django 금융 거래 대시보드 — AnyChart JS 차트 통합

EODHD API에서 찾은 유용한 기사를 공유하게 되어 기쁘게 생각합니다. 이 기사에서는 노련한 개발자이자 최고의 Medium 작성자인 Michael Whittle이 JavaScript 차트 라이브러리를 Python Django 기반 거래 대시보드에 통합한 방법을 보여줍니다.

특히 그는 D3.js에서 AnyChart로 트리맵을 마이그레이션한 경험을 이야기하고 주식 차트 구현을 위해 우리 솔루션을 선택한 이유를 설명하며 직관적인 코드와 향상된 기능을 강조합니다.

AnyChart JS Charts를 사용하여 Python Django 웹 애플리케이션에서 재무 데이터 시각화를 향상시킬 수 있는 방법을 알아보세요.

---

이 기사는 시리즈의 이전 두 기사인 "Python Django를 사용하여 금융 거래 대시보드 구축" 및 "Python Django를 사용하여 금융 거래 대시보드 강화하기"를 기반으로 작성되었습니다.

처음에는 D3.js 라이브러리를 사용하여 랜딩 페이지의 트리맵을 만들었습니다. 잘 작동했지만 다른 차트 옵션을 살펴보고 싶었기 때문에 Chart.js와 AnyChart를 모두 평가했습니다. 궁극적으로 저는 트리맵을 D3.js에서 AnyChart로 마이그레이션하기로 결정했습니다. 차트의 시각적인 모양은 상당히 유사하지만 AnyChart의 코드가 훨씬 더 직관적이고 이해하기 쉽다는 것을 알았습니다. 또한 저는 개인적으로 AnyChart 트리맵이 약간 더 많은 기능을 제공하고 더 세련되어 보인다고 생각합니다. 그렇긴 하지만, 여전히 실행 가능한 옵션인 Chart.js의 미학도 마음에 들었습니다.

이전 글에서는 부트스트랩 데이터 테이블을 사용해 시장의 과거 데이터를 깔끔하게 표시하는 페이지를 만들었습니다. 이 기사에서는 테이블 위에 매력적인 주식 차트를 포함하고 싶었습니다. 다시 한 번 세 가지 차트 라이브러리를 고려했지만 AnyChart가 데이터를 표시하는 방식과 제공하는 기능에 특히 깊은 인상을 받았습니다. 이 기사에서는 이것이 어떻게 달성되었는지 설명합니다.

드디어 Bootstrap에서 사용할 수 있는 또 다른 유용한 기능을 발견했습니다. 이전 기사에서는 "Excel로 내보내기" 버튼을 추가하는 방법을 설명했습니다. 마찬가지로, 코드 한 줄만으로 '인쇄' 버튼을 추가할 수도 있습니다. 이 기능은 Bootstrap 테이블에서 데이터를 가져와 인쇄하기 쉬운 형식으로 표시합니다.

빠른 점프:

1. 뷰 업데이트
2. 템플릿 업데이트 — index.html
3. 템플릿 업데이트 — Historical_data.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"에는 Bootstrap 데이터 테이블에 사용되는 API에서 반환된 원시 데이터가 포함되어 있습니다. 두 번째인 "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개 항목만 표시되었습니다.

이 문제를 해결하기 위해 간단하면서도 효과적인 솔루션을 고안했습니다. 트리맵에 전달된 값이 항상 절대값(양수)인지 확인하고 셀 표시에서 이 값을 제거했습니다. 대신 마우스를 올리면 나타나는 툴팁에 추가했습니다. 이를 통해 기분 좋은 색상 그라데이션으로 트리맵을 올바르게 렌더링하는 동시에 필요할 때 실제 값을 표시할 수 있었습니다.

  <meta charset="UTF-8">
  <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>
  
  
  템플릿 업데이트 — Historical_data.html 
</h3>

<p>다음 부분은 과거 데이터 Bootstrap 테이블 위에 AnyChart 주식 차트를 추가하는 것이었습니다. 위에서 언급한 대로 '인쇄' 버튼도 추가해 편리하게 사용할 수 있도록 했습니다.</p>

<p>Chart.js와 AnyChart 모두 정말 멋진 기능이 풍부한 그래프를 가지고 있다는 것을 알았습니다. 앱에서 라이브러리를 섞고 싶지 않아서 AnyChart를 사용하기로 결정했는데, 그래프 모양도 꽤 마음에 들었습니다.</p>

<p>정말 좋은 점은 그래프가 대화형이라는 점입니다. 추가 정보를 보려면 데이터 포인트 위로 이동, 확대/축소 및 마우스를 이동할 수 있습니다. 주식 시작 시 대부분의 거래 애플리케이션처럼 시각적으로 표현된 촛대를 볼 수도 있습니다. 종가가 시가보다 높으면 녹색 막대가 표시되고, 종가가 시가보다 낮으면 빨간색 막대가 표시됩니다.<br>
</p>
<pre class="brush:php;toolbar:false">



  <title>{{ 시장 }}({{ 간격 }})에 대한 과거 데이터</title>
  <meta charset="UTF-8">
  <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 일, .table td {
      색상: #ffffff;
    }

    .chart-컨테이너 {
      여백 하단: 20px;
    }

    .dt-버튼 .btn {
      오른쪽 여백: 10px;
    }

    .page-item.active .page-link {
      Z-인덱스: 3;
      색상: #ffffff !중요;
      배경색: #495057 !중요;
      테두리 색상: #495057 !중요;
    }

    .page-link {
      색상: #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-다크 {
      배경색: #6c757d !중요;
      테두리 색상: #6c757d !중요;
      색상: #ffffff !중요;
    }

    .btn-dark:hover {
      배경색: #5a6268 !중요;
      테두리 색상: #5a6268 !중요;
    }
  스타일>
머리>


  <div>



<h3>
  
  
  요약 
</h3>

<p>AnyChart의 JavaScript 차트 라이브러리 코드는 읽고 이해하기 쉽습니다. 그러나 그래프에는 "평가판" 워터마크가 표시됩니다. 라이센스를 구매하면 이 워터마크가 제거되고 추가 지원이 제공됩니다. 그럼에도 불구하고 평가판은 제게는 잘 작동했습니다.</p>
<h3>
  
  
  다음 단계 
</h3>

<p>시리즈의 다음 기사에서는 기본 데이터와 시가총액을 애플리케이션에 통합하는 방법을 살펴보겠습니다.</p>


<hr>

<p><em><strong>원래 금융 데이터 API 원스톱 상점인 EODHD.com에 'Python Django를 사용한 금융 거래 대시보드를 위한 AnyChart 통합'이라는 제목으로 2024년 11월에 게시되었습니다.</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>