Papan Pemuka Dagangan Kewangan Python Django — Mengintegrasikan Carta JS AnyChart

Kami berbesar hati untuk berkongsi artikel berguna yang kami temui pada API EODHD, di mana Michael Whittle, pembangun berpengalaman dan pengarang Sederhana teratas, menunjukkan cara dia menyepadukan perpustakaan carta JavaScript kami ke dalam papan pemuka dagangan berasaskan Python Djangonya.

Khususnya, beliau membincangkan pengalamannya memindahkan peta pokok daripada D3.js kepada AnyChart dan menerangkan sebab beliau memilih penyelesaian kami untuk melaksanakan carta saham, menyerlahkan kod intuitif dan kefungsian yang dipertingkatkan.

Baca terus untuk mengetahui cara anda boleh meningkatkan visualisasi data kewangan anda dalam aplikasi web Python Django dengan Carta JS AnyChart.

---

Artikel ini dibina berdasarkan dua siri sebelumnya, “Bina Papan Pemuka Perdagangan Kewangan dengan Python Django” dan “Mempertingkatkan Papan Pemuka Perdagangan Kewangan dengan Python Django”.

Pada mulanya, saya mencipta peta pokok pada halaman pendaratan menggunakan perpustakaan D3.js. Walaupun ia berfungsi dengan baik, saya ingin meneroka pilihan carta lain, jadi saya menilai kedua-dua Chart.js dan AnyChart. Akhirnya, saya memutuskan untuk memindahkan peta pokok daripada D3.js kepada AnyChart. Walaupun rupa visual carta agak serupa, saya mendapati kod AnyChart jauh lebih intuitif dan lebih mudah difahami. Selain itu, saya secara peribadi merasakan bahawa peta pokok AnyChart menawarkan lebih banyak fungsi dan kelihatan lebih digilap. Walau bagaimanapun, saya juga menyukai estetika Chart.js, yang kekal sebagai pilihan yang berdaya maju.

Dalam artikel sebelumnya, saya mencipta halaman yang memaparkan data sejarah pasaran, dibentangkan dengan kemas menggunakan jadual data Bootstrap. Untuk artikel ini, saya ingin memasukkan carta saham yang menarik di atas jadual. Sekali lagi, saya mempertimbangkan tiga perpustakaan carta, tetapi saya amat kagum dengan cara AnyChart mempersembahkan data dan fungsi yang ditawarkannya. Artikel ini akan menerangkan cara ini dicapai.

Akhirnya, saya menemui satu lagi ciri berguna yang tersedia dalam Bootstrap. Dalam artikel sebelumnya, saya menunjukkan cara menambah butang "Eksport ke Excel". Begitu juga, dengan hanya satu baris kod, anda juga boleh menambah butang "Cetak". Ciri ini mengambil data daripada jadual Bootstrap dan membentangkannya dalam format mesra cetak.

Lompat pantas:

1. Mengemas kini Paparan
2. Mengemas kini Templat — index.html
3. Mengemas kini Templat — historical_data.html
4. Ringkasan
5. Langkah Seterusnya

Mengemas kini Paparan

Saya hanya perlu membuat satu perubahan pada paparan untuk memastikan carta stok data sejarah berfungsi.

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

Jika anda memberi perhatian kepada output fungsi, anda akan dapati bahawa saya telah memisahkan data kepada dua bahagian. Yang pertama, "data_sejarah", mengandungi data mentah yang dikembalikan oleh API, yang digunakan untuk jadual data Bootstrap. Yang kedua, "historical_data_json", ialah versi data yang telah dibersihkan dalam format JSON, yang diperlukan untuk carta saham AnyChart. Membuat ini berfungsi sebenarnya agak mencabar. Saya ingin menyediakan dua cara untuk menggambarkan data sejarah, tetapi setiap satu memerlukan data dalam format yang berbeza. Pendekatan ini terbukti merupakan penyelesaian yang berkesan.

Mengemas kini Templat — index.html

Seperti yang saya nyatakan di atas, peta pokok awal saya menggunakan perpustakaan D3.js. Saya menilai kedua-dua pustaka Chart.js dan AnyChart. Saya mendapati pustaka AnyChart berinisiatif dan kelihatan lebih cantik dan lebih gilap. Saya telah memasukkan kod yang ditukar di bawah.

GOTCHA

Saya menemui salah satu pepijat paling pelik yang membuatkan saya hairan selama beberapa hari. Apabila saya mula-mula menukar kod peta pokok daripada D3.js kepada AnyChart, ia berfungsi dengan sempurna. Saya kemudian mengalihkan tumpuan saya kepada carta saham Data Sejarah, tetapi apabila saya kembali ke peta pokok AnyChart, carta itu tidak dipaparkan dengan betul. Walaupun API menerima data untuk 110 indeks pasaran, hanya 11 yang dipaparkan.

Untuk menyahpepijat ini, saya terpaksa menanggalkan kod itu kepada komponennya yang paling mudah. “Masalah,” ternyata, berkaitan dengan kemasukan pulangan_harian saya sebagai nilai untuk peta pokok. Saya memilih untuk menggunakan pulangan_harian berbanding bilangan juzuk kerana ia menghasilkan kecerunan warna yang lebih menarik secara visual antara nilai tinggi dan rendah. Walau bagaimanapun, saya mendapati bahawa peta pokok memerlukan nombor positif sebagai nilai untuk dipaparkan dengan betul—begitulah cara ia berfungsi.

Apabila saya mula-mula membuatnya berfungsi, keadaan pasaran mestilah sangat baik, kerana semua pulangan harian adalah positif. Pada masa saya menyemak semula kod itu beberapa hari kemudian, beberapa pulangan harian adalah negatif, yang menyebabkan hanya 11 entri dipaparkan.

Untuk menangani perkara ini, saya telah mencipta penyelesaian yang mudah tetapi berkesan. Saya memastikan bahawa nilai yang dihantar ke peta pokok sentiasa mutlak (nombor positif) dan mengalih keluar nilai ini daripada paparan sel. Sebaliknya, saya menambahkannya pada petua alat yang muncul pada tuding tetikus. Ini membenarkan peta pokok untuk dipaparkan dengan betul dengan kecerunan warna yang menggembirakan, sambil masih membolehkan nilai sebenar dipaparkan apabila diperlukan.

<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Peta Pokok Indeks Pasaran</title>

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

  <gaya>
    badan {
      warna latar belakang: #343a40;
      warna: #ffffff;
    }
    #peta pokok {
      lebar: 100%;
      ketinggian: 80vh;
      margin: 0 auto;
    }
  


<badan>
  <div>



<h3>
  
  
  Mengemas kini Templat — historical_data.html 
</h3>

<p>Bahagian seterusnya ialah menambah carta saham AnyChart di atas jadual Bootstrap data sejarah. Seperti yang saya nyatakan di atas, saya turut menambah butang "Cetak" yang boleh digunakan.</p>

<p>Saya dapati Chart.js dan AnyChart mempunyai graf kaya ciri yang sangat menarik. Saya memutuskan untuk menggunakan AnyChart kerana saya tidak mahu mencampurkan perpustakaan dalam apl, tetapi saya juga sangat menyukai rupa graf itu.</p>

<p>Apa yang saya suka ialah graf itu interaktif. Anda boleh menyorot, zum dan tetikus pada titik data untuk mendapatkan maklumat tambahan. Sebagai permulaan saham, anda juga boleh melihat batang lilin diwakili secara visual seperti kebanyakan aplikasi dagangan. Bar hijau jika tutup lebih tinggi daripada buka, dan kereta merah jika tutup lebih rendah daripada buka.<br>
</p>
<pre class="brush:php;toolbar:false">


<kepala>
  <tajuk>Data Sejarah untuk {{ pasaran }} ({{ selang }})
  <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">

  <gaya>
    badan {
      warna latar belakang: #343a40;
      warna: #ffffff;
    }

    .table {
      warna latar belakang: #212529;
    }

    .table th, .table td {
      warna: #ffffff;
    }

    .carta-bekas {
      jidar bawah: 20px;
    }

    .dt-buttons .btn {
      jidar kanan: 10px;
    }

    .page-item.active .page-link {
      indeks z: 3;
      warna: #ffffff !penting;
      warna latar belakang: #495057 !penting;
      warna sempadan: #495057 !penting;
    }

    .pautan halaman {
      warna: #ffffff !penting;
      warna latar belakang: #6c757d !penting;
      warna sempadan: #343a40 !penting;
    }

    .page-link:hover {
      warna: #adb5bd !penting;
      warna latar belakang: #5a6268 !penting;
      warna sempadan: #343a40 !penting;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      warna: #ffffff !penting;
      warna latar belakang: #6c757d !penting;
      sempadan: 1px pepejal #343a40 !penting;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:tuding {
      warna latar belakang: #5a6268 !penting;
      sempadan: 1px pepejal #343a40 !penting;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      warna: #ffffff !penting;
      warna latar belakang: #495057 !penting;
      sempadan: 1px pepejal #343a40 !penting;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
      warna latar belakang: #6c757d !penting;
      warna: #ffffff !penting;
    }

    .btn-dark {
      warna latar belakang: #6c757d !penting;
      warna sempadan: #6c757d !penting;
      warna: #ffffff !penting;
    }

    .btn-dark:hover {
      warna latar belakang: #5a6268 !penting;
      warna sempadan: #5a6268 !penting;
    }
  


<badan>
  <div>



<h3>
  
  
  Ringkasan 
</h3>

<p>Saya dapati kod pustaka carta JavaScript AnyChart mudah dibaca dan difahami. Walau bagaimanapun, graf memaparkan tera air "versi percubaan". Pembelian lesen mengalih keluar tera air ini dan menawarkan sokongan tambahan. Walaupun begitu, versi percubaan telah berfungsi dengan baik untuk saya.</p>
<h3>
  
  
  Langkah Seterusnya 
</h3>

<p>Artikel seterusnya dalam siri ini akan meneroka memasukkan data asas dan permodalan pasaran ke dalam aplikasi.</p>


<hr>

<p><em><strong>Pada asalnya diterbitkan di EODHD.com, kedai sehenti untuk API data kewangan, di bawah tajuk "Penyatuan AnyChart untuk Papan Pemuka Perdagangan Kewangan dengan Python Django" pada November 2024.</strong></em></p>

<p><em><strong>Ditulis oleh Michael Whittle, seorang arkitek penyelesaian, pembangun dan penganalisis dengan lebih dua puluh tahun pengalaman dan pengarang terkemuka di Medium.</strong></em></p>


<hr>

<h2>
  
  
  Pautan AnyChart Berguna
</h2>

<ul>
<li> Carta Peta Pokok — Chartopedia
</li>
<li> Carta Saham — Chartopedia
</li>
<li> Cara Membuat Carta Peta Pokok — Tutorial Carta JavaScript
</li>
<li> Cara Membuat Carta Saham — Tutorial Carta JavaScript
</li>
<li> Python / Django / MySQL — Templat Penyepaduan
</li>
<li> Python / Flask / MySQL — Templat Penyepaduan
</li>
<li> Penyelesaian Perniagaan dan Papan Pemuka
</li>
</ul>


          </div>

            
        </badan></gaya></tajuk></kepala>