Apakah Visualisasi Data?

Penggambaran data ialah amalan mewakili data/maklumat dalam format bergambar atau grafik. Ia ialah satu cara set data atau metrik yang besar ditukar kepada elemen visual seperti peta, graf dan carta, yang lebih menarik kepada pengguna akhir.

Ekosistem JavaScript pada masa ini mempunyai beberapa perpustakaan kelas pertama yang boleh dipercayai untuk visualisasi data. Sebahagian daripadanya termasuk D3.js, Highcharts, Charts.js, Rechart, dll. Walau bagaimanapun, dalam artikel ini, kami akan menggunakan Highcharts untuk mencipta carta kami.

Highcharts ialah perpustakaan JavaScript untuk mencipta carta berasaskan SVG, responsif dan interaktif untuk web dan mudah alih. Ia menyediakan penyesuaian carta yang mendalam melalui JavaScript atau CSS. Highcharts menawarkan empat kategori produk untuk mencipta carta. Ini termasuk:

• Carta Tinggi: Ini ialah modul Carta Tinggi asas yang diperlukan dalam semua carta. Ia boleh digunakan untuk membuat carta garisan, bar dan pai yang mudah.
• Stok Highcharts: Ini digunakan untuk mencipta stok am dan carta garis masa untuk aplikasi anda. Beberapa contoh termasuk carta Saham mudah, Candlesticks & Heikin-Ashi, OHLC. Anda juga boleh menggunakan modul Alat Stok yang menyediakan GUI yang membenarkan interaksi dengan carta.
• Peta Highcharts: Highcharts juga menyediakan pilihan untuk menjana peta skematik yang membolehkan pembangun menambah peta interaktif dan boleh disesuaikan pada aplikasi web mereka. Ia menawarkan pilihan untuk sama ada menggunakan koleksi peta yang disediakan oleh Highcharts atau membuat peta SVG tersuai untuk memenuhi tujuan anda.
• Carta Tinggi Gantt: Ini ialah jenis carta palang khas yang digunakan untuk menggambarkan jadual projek.

Kami akan menggunakan Saham Highcharts untuk mencipta batang lilin gaya dengan pengayun dan penunjuk teknikal yang disediakan oleh modul Alat Stok.

Mencipta Candlestick

Carta candlestick(atau carta candlestick Jepun) ialah gaya carta kewangan yang digunakan oleh pedagang untuk menentukan kemungkinan pergerakan harga saham, keselamatan atau mata wang berdasarkan corak sebelumnya. Ia menggunakan nilai mata harga utama/ OHLC(terbuka, tinggi, rendah, tutup) yang diambil pada selang masa yang tetap untuk tempoh masa tertentu.

Jangan dikelirukan dengan carta candlestick biasa ialah carta Heikin-Ashi('bar purata'). Walaupun sama dengan carta candlestick, ia kebanyakannya digunakan bersama dengan candlestick kerana ia membantu menjadikan arah aliran carta candlestick lebih mudah untuk dianalisis. Oleh itu, menjadikannya lebih mudah dibaca.

API Highcharts menyediakan pilihan untuk mencipta kedua-dua carta candlestick dan carta Heikin-Ashi. Artikel ini memberi tumpuan kepada carta candlestick; walau bagaimanapun, saya akan menunjukkan pertukaran yang diperlukan untuk mencipta carta Heikin-Ashi di sepanjang jalan. Jom kotorkan tangan kita kan?!

Bermula

Untuk mula menggunakan Highcharts, kita mesti memuat turun Highcharts dahulu. Highcharts menyediakan beberapa pilihan untuk memperkenalkan Highcharts ke dalam projek anda. Anda boleh memilih sama ada:

• Muat turun keseluruhan perpustakaan Highcharts. Bergantung pada kes penggunaan anda, anda juga boleh memuat turun perpustakaan Highcharts Stock, Peta atau Gantt.
• Pasang Highcharts melalui NPM dan import sebagai modul. Ini adalah yang terbaik untuk Aplikasi Halaman Tunggal seperti React dan Vue.
• Gunakan CDN Highcharts untuk mengakses fail secara terus.

Kami akan menggunakan CDN Highcharts untuk artikel ini.

HTML

Sebahagian besar HTML mengandungi teg skrip yang digunakan untuk memuatkan CDN Highcharts. Tiga yang pertama memerlukan modul untuk semua carta saham yang dibuat dengan Highcharts.

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

Tidak seperti carta candlestick, jika anda perlu mencipta carta Heikin-Ashi, anda perlu membawa masuk modul secara berasingan seperti di bawah:

<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>

CDN terakhir yang perlu kami bawa ke dalam aplikasi kami ialah modul Alat Stok. Ini membolehkan kami menggunakan penunjuk teknikal. Modul Alat Stok mesti dimuatkan terakhir supaya ia boleh mengambil semua modul yang tersedia dari atas.

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

Daripada memuatkan semua penunjuk teknikal daripada modul Alat Stok, anda juga boleh memuatkan penunjuk tertentu bergantung pada keperluan anda:

<script src="https://code.highcharts.com/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/indicators/ema.js"></script>
<script src="https://code.highcharts.com/indicators/macd.js"></script>

Akhir sekali, kami perlu mencipta elemen HTML untuk memegang carta kami yang boleh kami rujuk daripada JavaScript:

<div>



<h3>
  
  
  The JavaScript
</h3>

<p><strong>Bringing in our Data</strong><br>
The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>

• The first parameter, renderTo, is the DOM element or the id of the DOM element to which the chart should render.
• The second parameter, options, are the options that structure the chart.

Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365', 
function (candlestick) {
  // create the chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Untitled Masterpiece'
    },

    series: [
      {
        type: "candlestick",    //heikinashi for Heikin-Ashi chart
        name: "Ethereum",      //chart name
        id: "eth",             // chart id, useful when adding indicators and oscillators
        data: candlestick,      //data gotten from the API call above
      },
    ], 

yAxis: [
      {
        height: "100%",       // height of the candlestick chart
        visible: true,  
      }
    ]
  });
});

Kod di atas memberi kita batang lilin yang ringkas dengan gaya asas yang disediakan oleh Highcharts.

Alat Stok

Alat Stok Highcharts ialah ciri pilihan dalam Highcharts. Anda boleh sama ada mendayakan keseluruhan Antara Muka Pengguna Grafik (GUI) Alat Stok, yang membenarkan pengguna menambah penunjuk dan pengayun berdasarkan keperluan mereka, atau menambah Alat Stok tertentu pada apl web anda melalui Javascript.

Kami akan menambah penunjuk(Jalur pecutan) dan pengayun(pengayun hebat) pada carta kami. Untuk melakukan ini, kita perlu mengedit kedua-dua objek siri dan yAxis di atas:

series: [
      {
        type: "candlestick",
        name: "Ethereum",
        id: "eth",           // chart id, useful when adding indicators and oscillators
        data: data,
      },
         {
        type: "abands",      //acceleration bands indicator
        id: "overlay",       // overlays use the same scale and are plotted on the same axes as the main series.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 0,           // the index of yAxis the particular series connects to
      },
      {
        type: "ao",          // awesome oscillator
        id: "oscillator",    // oscillators requires additional yAxis be created due to different data extremes.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 1,           // the index of yAxis the particular series connects to
      },
    ],
    yAxis: [
      {
        //index 0
        height: "80%",      //height of main series 80%

        resize: {
          enabled: true,     // allow resize of chart heights
        },
      },
      {
        //index 1
        top: "80%",         // oscillator series to begin at 80%
        height: "20%",      //height of oscillator series
      },
    ],

Inilah yang kami ada sekarang:

Menggayakan Carta

Sebelum kita boleh mula menggayakan carta, kita perlu memahami dahulu bahagian berbeza yang membentuk carta.

Highcharts menyediakan dua cara untuk menggayakan carta:

• Highcharts.CSSObject: Ini ialah kaedah lalai untuk menggayakan carta. Ia dibina di atas objek pilihan dalam kelas carta saham yang disediakan oleh Highcharts untuk menentukan penampilan visual elemen SVG individu dan elemen HTML dalam carta.
• styledMode: boolean: Ini lalai kepada false. Walau bagaimanapun, apabila dalam mod gaya, tiada atribut persembahan digunakan pada SVG melalui objek pilihan. Oleh itu, peraturan CSS diperlukan untuk menggayakan carta.

Kami akan menggunakan penggayaan lalai Highcharts untuk artikel ini. Oleh itu, dalam objek pilihan:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

Ini adalah carta akhir kami:

Kesimpulan

Mencipta candlestick mata wang kripto bergaya dengan Highcharts membolehkan anda mengubah data mentah menjadi cerapan visual yang menarik dan boleh diambil tindakan. Dengan memanfaatkan fleksibiliti Highcharts, anda boleh menyesuaikan carta candlestick untuk diselaraskan dengan penjenamaan anda, meningkatkan pengalaman pengguna dan menyampaikan arah aliran pasaran dengan berkesan. Sama ada anda sedang membina papan pemuka kewangan atau mempertingkatkan platform dagangan, keupayaan untuk mereka bentuk dan melaksanakan visualisasi yang disesuaikan ialah kemahiran kritikal dalam landskap terdorong data hari ini.

Dengan langkah-langkah yang digariskan dalam panduan ini, anda kini mempunyai asas untuk bekerja dengan Highcharts untuk mencipta carta candlestick yang dinamik. Terokai penyesuaian tambahan dan bereksperimen dengan API tinggi Highcharts untuk membawa visualisasi mata wang kripto anda ke peringkat seterusnya.

Atas ialah kandungan terperinci Visualisasi Data: Cara Membuat Candlestick Mata Wang Kripto Bergaya dengan Carta Tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!