資料視覺化：如何使用 Highcharts 創建風格化的加密貨幣燭台

什麼是數據視覺化？

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

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

---

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

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

我們將使用 Highcharts Stock 創建具有股票工具模組提供的振盪器和技術指標的樣式燭台。

創建燭台

燭台圖（或日本燭台圖）是交易者用來根據先前模式確定股票、證券或貨幣可能的價格變動的一種金融圖表。它利用在指定時間內定期取得的關鍵價格點/ OHLC（開盤價、最高價、最低價、收盤價）值。

Heikin-Ashi（「平均柱」）圖不要與典型的燭台圖混淆。儘管與燭台圖相同，但它主要與燭台一起使用，因為它有助於使燭台圖趨勢更容易分析。因此，使其更具可讀性。

Highcharts API 提供了用於建立蠟燭圖和 Heikin-Ashi 圖表的選項。本文重點介紹蠟燭圖；不過，我將指出創建 Heikin-Ashi 圖所需的權衡。讓我們動手吧，好嗎？ ！

入門

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

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

本文將使用 Highcharts CDN。

超文本標記語言

大部分 HTML 包含用於載入 Highcharts CDN 的腳本標籤。前三個是使用 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>

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

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

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

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

除了從股票工具模組載入所有技術指標之外，您還可以根據需要載入特定指標：

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

最後，我們需要建立一個 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,  
      }
    ]
  });
});

上面的程式碼為我們提供了一個簡單的燭台，其基本樣式由 Highcharts 提供。

庫存工具

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

我們將在圖表中加入一個指標（加速帶）和一個振盪器（很棒的振盪器）。為此，我們需要編輯上面的系列和 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
      },
    ],

這是我們現在擁有的：

設計圖表樣式

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

Highcharts 提供了兩種設計圖表樣式的方式：

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

本文將使用 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>

這就是我們最終的圖表：

結論

使用 Highcharts 創建風格化的加密貨幣燭台，使您可以將原始資料轉換為視覺上引人注目且可操作的見解。透過利用 Highcharts 的靈活性，您可以自訂蠟燭圖以與您的品牌保持一致，增強用戶體驗並有效傳達市場趨勢。無論您是建立財務儀表板還是增強交易平台，設計和實現客製化視覺化的能力都是當今數據驅動領域的關鍵技能。

透過本指南中概述的步驟，您現在已經具備了使用 Highcharts 建立動態燭台圖的基礎。探索其他自訂並嘗試使用 Highcharts 的廣泛 API，將您的加密貨幣視覺化提升到新的水平。

以上是資料視覺化：如何使用 Highcharts 創建風格化的加密貨幣燭台的詳細內容。更多資訊請關注PHP中文網其他相關文章！