什麼是數(shù)據(jù)視覺化？

資料視覺化是以圖片或圖形格式表示資料/資訊的實(shí)踐。它是一種將大型資料集或指標(biāo)轉(zhuǎn)換為地圖、圖形和圖表等視覺元素的方法，這對(duì)最終用戶來說更具吸引力。

JavaScript 生態(tài)系統(tǒng)目前擁有多個(gè)可靠、一流的資料視覺化程式庫。其中包括 D3.js、Highcharts、Charts.js、Rechart 等。但是，在本文中，我們將使用 Highcharts 來建立圖表。

---

Highcharts 是一個(gè) JavaScript 函式庫，用於為 Web 和行動(dòng)裝置建立基於 SVG 的響應(yīng)式互動(dòng)式圖表。它透過 JavaScript 或 CSS 提供圖表的深度自訂。 Highcharts 提供四種用於建立圖表的產(chǎn)品類別。其中包括：

• Highcharts：這是所有圖表都需要的基本 Highcharts 模組。它可用於建立簡單的折線圖、長條圖和圓餅圖。
• Highcharts Stock： 用於為您的應(yīng)用程式建立一般股票和時(shí)間軸圖表。一些例子包括簡單的股票圖表、蠟燭圖和 Heikin-Ashi、OHLC。您也可以使用 Stock Tools 模組，該模組提供允許與圖表互動(dòng)的 GUI。
• Highcharts 地圖： Highcharts 還提供了生成示意圖的選項(xiàng)，允許開發(fā)人員將互動(dòng)式、可自訂的地圖添加到他們的 Web 應(yīng)用程式中。它提供了使用 Highcharts 提供的地圖集或建立自訂 SVG 地圖以滿足您的目的的選項(xiàng)。
• 高圖甘特圖：這是一種特殊類型的長條圖，用來說明專案進(jìn)度表。

我們將使用 Highcharts Stock 創(chuàng)建具有股票工具模組提供的振盪器和技術(shù)指標(biāo)的樣式燭臺(tái)。

創(chuàng)建燭臺(tái)

燭臺(tái)圖（或日本燭臺(tái)圖）是交易者用來根據(jù)先前模式確定股票、證券或貨幣可能的價(jià)格變動(dòng)的一種金融圖表。它利用在指定時(shí)間內(nèi)定期取得的關(guān)鍵價(jià)格點(diǎn)/ OHLC（開盤價(jià)、最高價(jià)、最低價(jià)、收盤價(jià)）值。

Heikin-Ashi（「平均柱」）圖不要與典型的燭臺(tái)圖混淆。儘管與燭臺(tái)圖相同，但它主要與燭臺(tái)一起使用，因?yàn)樗兄妒範(fàn)T臺(tái)圖趨勢(shì)更容易分析。因此，使其更具可讀性。

Highcharts API 提供了用於建立蠟燭圖和 Heikin-Ashi 圖表的選項(xiàng)。本文重點(diǎn)介紹蠟燭圖；不過，我將指出創(chuàng)建 Heikin-Ashi 圖所需的權(quán)衡。讓我們動(dòng)手吧，好嗎？ ！

入門

要開始使用 Highcharts，我們必須先下載 Highcharts。 Highcharts 提供了多種將 Highcharts 引入您的專案的選項(xiàng)。您可以選擇：

• 下載整個(gè) Highcharts 庫。根據(jù)您的使用案例，您也可以下載 Highcharts Stock、地圖或甘特圖庫。
• 透過 NPM 安裝 Highcharts 並作為模組導(dǎo)入。這些最適合 React 和 Vue 等單頁應(yīng)用程式。
• 使用 Highcharts CDN 直接存取檔案。

本文將使用 Highcharts CDN。

超文本標(biāo)記語言

大部分 HTML 包含用於載入 Highcharts CDN 的腳本標(biāo)籤。前三個(gè)是使用 Highcharts 創(chuàng)建的所有股票圖表所需的模組。

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

與蠟燭圖不同，如果您需要建立 Heikin-Ashi 圖表，則需要單獨(dú)引入模組，如下所示：

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

我們需要引入應(yīng)用程式的最終 CDN 是 Stock Tools 模組。這使我們能夠利用技術(shù)指標(biāo)。 Stock Tools 模組必須最後加載，以便它可以從上面獲取所有可用的模組。

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

除了從股票工具模組載入所有技術(shù)指標(biāo)之外，您還可以根據(jù)需要載入特定指標(biāo)：

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

最後，我們需要建立一個(gè) HTML 元素來保存我們可以從 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,  
      }
    ]
  });
});

上面的程式碼為我們提供了一個(gè)簡單的燭臺(tái)，其基本樣式由 Highcharts 提供。

庫存工具

Highcharts 庫存工具是 Highcharts 中的一項(xiàng)選用功能。您可以啟用整個(gè)股票工具圖形使用者介面 (GUI)，該介面可讓使用者根據(jù)自己的需求添加指標(biāo)和震盪指標(biāo)，也可以透過 Javascript 將特定的股票工具新增至您的 Web 應(yīng)用程式。

我們將在圖表中加入一個(gè)指標(biāo)（加速帶）和一個(gè)振盪器（很棒的振盪器）。為此，我們需要編輯上面的系列和 yAxis 物件：

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
      },
    ],

這是我們現(xiàn)在擁有的：

設(shè)計(jì)圖表樣式

在開始設(shè)計(jì)圖表樣式之前，我們需要先了解組成圖表的不同部分。

Highcharts 提供了兩種設(shè)計(jì)圖表樣式的方式：

• Highcharts.CSSObject：這是圖表樣式的預(yù)設(shè)方法。它基於 Highcharts 提供的 stockChart 類別中的選項(xiàng)物件構(gòu)建，用於定義圖表中各個(gè) SVG 元素和 HTML 元素的視覺外觀。
• styledMode: boolean：預(yù)設(shè)為 false。但是，在樣式模式下，不會(huì)透過選項(xiàng)物件將任何表現(xiàn)屬性套用至 SVG。因此，需要 CSS 規(guī)則來設(shè)定圖表的樣式。

本文將使用 Highcharts 預(yù)設(shè)樣式。因此，在選項(xiàng)物件內(nèi)：

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

這就是我們最終的圖表：

結(jié)論

使用 Highcharts 創(chuàng)建風(fēng)格化的加密貨幣燭臺(tái)，使您可以將原始資料轉(zhuǎn)換為視覺上引人注目且可操作的見解。透過利用 Highcharts 的靈活性，您可以自訂蠟燭圖以與您的品牌保持一致，增強(qiáng)用戶體驗(yàn)並有效傳達(dá)市場(chǎng)趨勢(shì)。無論您是建立財(cái)務(wù)儀表板還是增強(qiáng)交易平臺(tái)，設(shè)計(jì)和實(shí)現(xiàn)客製化視覺化的能力都是當(dāng)今數(shù)據(jù)驅(qū)動(dòng)領(lǐng)域的關(guān)鍵技能。

透過本指南中概述的步驟，您現(xiàn)在已經(jīng)具備了使用 Highcharts 建立動(dòng)態(tài)燭臺(tái)圖的基礎(chǔ)。探索其他自訂並嘗試使用 Highcharts 的廣泛 API，將您的加密貨幣視覺化提升到新的水平。

以上是資料視覺化：如何使用 Highcharts 創(chuàng)建風(fēng)格化的加密貨幣燭臺(tái)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！