Jak vytvořit akciový graf (JS) ve 4 krocích

Vizualizace dat je široce používána v různých oblastech. Jednou z takových domén je finanční obchodování, kde jsou akciové grafy zásadní pro inteligentní analýzu tržních dat a rozhodování. Ať už investujete do akcií nebo ne, jsem si docela jistý, že jste se s takovou grafikou setkali nebo byste si ji možná právě teď potřebovali postavit. Chtěli byste tedy vědět, jak vytvořit burzovní graf? Jsem připraven vám ukázat jednoduchou cestu pomocí údajů o ceně akcií Tesla a JavaScriptu! Pojďte se mnou v tomto tutoriálu a naučíte se, jak rychle vytvořit elegantní, interaktivní JS akciové grafy, jako je ten, který vidíte na obrázku.

Co je to burzovní graf?

Většina z vás možná zná základy, ale abychom se ujistili, že jsme všichni na stejné vlně, stručně vám řeknu, co je akciový graf.

Burzovní graf v podstatě představuje pohyby ceny nebo objemu akcie v průběhu času vynesením hodnot ceny nebo objemu na ose Y a časového období na ose X.

Akciové grafy hrají velmi důležitou roli v tom, že pomáhají investorům zjišťovat trendy a činit správná rozhodnutí o nákupu a prodeji na rychle se měnících finančních trzích.

Nejběžnějším typem grafu používaným k zobrazení akcií je svíčkový akciový graf. V závislosti na konkrétním případu a úloze však můžete použít také vizualizaci typu open-high-low-close (OHLC), liniové, plošné, sloupcové nebo jiné formy vizualizace řad.

Burzovní graf bude vytvořen

Tesla je společnost, která je vždy ve zprávách. V průběhu let exponenciálně rostl a to se v průběhu času do značné míry odráží v hodnotě jeho akcií. Takže pro tento tutoriál vytvořím akciový graf, který předvede pohyb cen společnosti Tesla Inc. Ukážu vám také, jak přidat různé technické indikátory a ilustrovat efekt nedávného humbuku kolem prodeje akcií Elona Muska.

Zde je náhled na konečnou verzi akciového grafu JavaScript, abyste byli všichni napumpováni pro nadcházející kroky.

Vytvoření akciového grafu pomocí JavaScriptu

Vytvoření interaktivního burzovního grafu od nuly může být docela skličující úkol, ale s vhodným nástrojem pro vizualizaci dat bude mnohem jednodušší a rychlejší. Existuje například několik užitečných knihoven grafů JavaScriptu, které dokážou vytvářet finanční grafiku, a můžete pracovat s tím, co vyhovuje vašim potřebám.

V tomto tutoriálu používám jednu z těch dobrých — knihovnu AnyChart JS, která má několik skvělých možností pro akciové grafy spolu s úhlednou dokumentací k nim a je zdarma pro jakékoli nekomerční a vzdělávací použití.

Ačkoli to není nutné, některé dovednosti s HTML a JavaScriptem mohou pomoci porozumět pojmům rychleji. Ale vše je docela jednoduché a bude to obsáhle vysvětleno, takže se nemusíte ničeho obávat, i když jste začátečník.

Úvodní zvonek zazvonil a je čas vytvořit akciový graf!

1. Vytvořte stránku HTML

První věc, kterou udělám, je vytvořit HTML stránku, na které bude graf umístěn, a přidat div prvek k vykreslení grafu. Tento prvek bloku by měl mít jedinečné ID, aby na něj bylo možné později v kódu odkazovat.

Také jsem nastavil styl div kde šířku a výšku definuji jako 100 % s 0 okraji a odsazením. Tím se zobrazí burzovní graf přes celou obrazovku.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Stock Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Přidejte požadované skripty

Protože používám knihovnu grafů, musím pro burzovní graf odkazovat na příslušné skripty JS z této knihovny. Pamatujte, že tyto skripty jsou součástí head části stránky HTML.

Pro akciový graf musím přidat více skriptů. Za prvé, zahrnuji moduly „core“ a „stock“ AnyChart. Dále přidám modul Data Adapter, který pomáhá načítat data. Nakonec přidávám moduly UI a Exports pro prvky uživatelského rozhraní a pro aktivaci funkcí exportu, které vám umožní uložit graf jako obrázek nebo extrahovat podkladová data do datového souboru.

Aby funkce uživatelského rozhraní akcií správně fungovaly, musím také propojit příslušné šablony stylů.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Stock Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-stock.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>

    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-exports.min.js"></script>

    <link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
    <link href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">

    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS Stock Chart will come here
    </script>
  </body>
</html>

3. Připravte data

V tomto akciovém grafu chci vizualizovat denní data cen akcií společnosti Tesla Inc. (TSLA), takže je převezmu z Yahoo Finance a datového souboru CSV zde.

Všechny přípravy jsou nyní hotové, takže začněme obchodovat nebo v našem případě psát kód pro grafy akcií JavaScript!

4. Napište potřebný kód JavaScript

Pro začátek uzavřem kód do funkce nazvané anychart.onDocumentReady() . Tím je zajištěno, že kód nebude spuštěn, dokud nebude stránka plně načtena. Dále načtu datový soubor pomocí anychart.data.loadCsvFile() funkce.

Poté vytvořím datovou tabulku a přidám do ní načtená data, ale než budu moci tato data použít pro svůj burzovní graf, musím je zmapovat. Protože vytvářím svíčkový akciový graf, mapuji hodnoty open, high, low a close.

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile(
    'https://gist.githubusercontent.com/shacheeswadia/cd509e0b0c03964ca86ae7d894137043/raw/5f336c644ad61728dbac93026f3268b86b8d0680/teslaDailyData.csv',
    function (data) {
      // create data table on loaded data
      var dataTable = anychart.data.table();
      dataTable.addData(data);

      // map loaded data for the candlestick series
      var mapping = dataTable.mapAs({
        open: 1,
        high: 2,
        low: 3,
        close: 4
      });
    }
  );
});

Nyní definuji burzovní graf, vykreslím jej a nastavím mřížku. Protože čísla jsou důležitá při pohledu na hodnoty skladových dat, povoluji všechny mřížky pro lepší čitelnost.

// create stock chart
var chart = anychart.stock();

// create first plot on the chart
var plot = chart.plot(0);

// set grid settings
plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);

Nyní přichází hlavní část tvorby série. To se provádí pomocí funkce kreslení svíček s mapováním, které jsem definoval dříve. Sérii pojmenuji a přidám ikonu legendy.

var series = plot.candlestick(mapping)
        .name('Tesla');

series.legendItem().iconType('rising-falling');

// create scroller series with mapped data
chart.scroller().candlestick(mapping);

Burzovní grafy mají hodnoty za dlouhé časové období. Přidávám tedy pod hlavní graf posuvnou řadu, která umožňuje uživateli specifikovat časové období a blíže se podívat na hodnoty těchto dat. Nastavil jsem jednoroční rozsah pro výchozí zobrazení.

Abych to pro uživatele usnadnil, nabízím jak výběr rozsahu, kde může uživatel ručně zadat data, tak volič rozsahu, kde lze běžně používaná časová období vybrat pouhým kliknutím.

// set chart selected date/time range
chart.selectRange('2020-11-27', '2021-11-26');

// create range picker
var rangePicker = anychart.ui.rangePicker();

// init range picker
rangePicker.render(chart);

// create range selector
var rangeSelector = anychart.ui.rangeSelector();

// init range selector
rangeSelector.render(chart);

Nakonec dám grafu název, odkazuji na dříve definovaný kontejner grafu a nakreslím graf.

// sets the title of the chart
chart.title('Tesla Inc. Stock Chart');

// set container id for the chart
chart.container('container');

// initiate chart drawing
chart.draw();

To je závěrečný zvonek a je vytvořen krásný, funkční akciový graf!

Můžete rychle zjistit, že ceny akcií Tesly v posledním roce kolísaly, ale celkový trend je pozitivní. Umístěním ukazatele myši na graf zobrazíte funkční popisek zobrazující datum spolu s hodnotami otevření, vysoké, nízké a uzavřené hodnoty. Toto je jedna z mnoha užitečných funkcí, které jsou zde již k dispozici.

Tuto počáteční verzi akciového grafu JS můžete vidět na CodePen [a na AnyChart Playground] s úplným kódem.

Přizpůsobení grafu akcií JavaScript

A. Typ řady a podmíněné zbarvení
B. Technické indikátory:EMA a Envelope
C. Indikátor MACD
D. Skvělý oscilátor
E. Paleta barev
F. Ilustrování a komentování

PRO PROCHÁZENÍ TĚMITO PŘIZPŮSOBENÍMI AKCIOVÉHO TABULKU JS POKRAČUJTE ZDE.