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

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

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

---

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

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

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

創(chuàng)建燭臺

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

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

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

入門

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

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

本文將使用 Highcharts CDN。

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

大部分 HTML 包含用於載入 Highcharts CDN 的腳本標(biāo)籤。前三個是使用 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 圖表，則需要單獨引入模組，如下所示：

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

最後，我們需要建立一個 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)，該介面可讓使用者根據(jù)自己的需求添加指標(biāo)和震盪指標(biāo)，也可以透過 Javascript 將特定的股票工具新增至您的 Web 應(yīng)用程式。

我們將在圖表中加入一個指標(biāo)（加速帶）和一個振盪器（很棒的振盪器）。為此，我們需要編輯上面的系列和 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è)計圖表樣式

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

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

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

本文將使用 Highcharts 預(yù)設(shè)樣式。因此，在選項物件內(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)格化的加密貨幣燭臺，使您可以將原始資料轉(zhuǎn)換為視覺上引人注目且可操作的見解。透過利用 Highcharts 的靈活性，您可以自訂蠟燭圖以與您的品牌保持一致，增強用戶體驗並有效傳達市場趨勢。無論您是建立財務(wù)儀表板還是增強交易平臺，設(shè)計和實現(xiàn)客製化視覺化的能力都是當(dāng)今數(shù)據(jù)驅(qū)動領(lǐng)域的關(guān)鍵技能。

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

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