什么是數(shù)據(jù)可視化？

數(shù)據(jù)可視化是以圖片或圖形格式表示數(shù)據(jù)/信息的實(shí)踐。它是一種將大型數(shù)據(jù)集或指標(biāo)轉(zhuǎn)換為地圖、圖形和圖表等視覺(jué)元素的方法，這對(duì)最終用戶(hù)來(lái)說(shuō)更具吸引力。

JavaScript 生態(tài)系統(tǒng)目前擁有多個(gè)可靠、一流的數(shù)據(jù)可視化庫(kù)。其中包括 D3.js、Highcharts、Charts.js、Rechart 等。但是，在本文中，我們將使用 Highcharts 來(lái)創(chuàng)建圖表。

---

Highcharts 是一個(gè) JavaScript 庫(kù)，用于為 Web 和移動(dòng)設(shè)備創(chuàng)建基于 SVG 的響應(yīng)式交互式圖表。它通過(guò) JavaScript 或 CSS 提供圖表的深度定制。 Highcharts 提供四種用于創(chuàng)建圖表的產(chǎn)品類(lèi)別。其中包括：

• Highcharts：這是所有圖表都需要的基本 Highcharts 模塊。它可用于創(chuàng)建簡(jiǎn)單的折線圖、條形圖和餅圖。
• Highcharts Stock： 用于為您的應(yīng)用程序創(chuàng)建一般股票和時(shí)間線圖表。一些示例包括簡(jiǎn)單的股票圖表、蠟燭圖和 Heikin-Ashi、OHLC。您還可以使用 Stock Tools 模塊，該模塊提供允許與圖表交互的 GUI。
• Highcharts 地圖： Highcharts 還提供了生成示意圖的選項(xiàng)，允許開(kāi)發(fā)人員將交互式、可自定義的地圖添加到他們的 Web 應(yīng)用程序中。它提供了使用 Highcharts 提供的地圖集或創(chuàng)建自定義 SVG 地圖以滿(mǎn)足您的目的的選項(xiàng)。
• 高圖甘特圖：這是一種特殊類(lèi)型的條形圖，用于說(shuō)明項(xiàng)目進(jìn)度表。

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

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

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

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

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

入門(mén)

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

• 下載整個(gè) Highcharts 庫(kù)。根據(jù)您的使用案例，您還可以下載 Highcharts Stock、地圖或甘特圖庫(kù)。
• 通過(guò) NPM 安裝 Highcharts 并作為模塊導(dǎo)入。這些最適合 React 和 Vue 等單頁(yè)應(yīng)用程序。
• 使用 Highcharts CDN 直接訪問(wèn)文件。

本文將使用 Highcharts CDN。

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

大部分 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>

與蠟燭圖不同，如果您需要?jiǎng)?chuàng)建 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>

最后，我們需要?jiǎng)?chuàng)建一個(gè) HTML 元素來(lái)保存我們可以從 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è)簡(jiǎn)單的燭臺(tái)，其基本樣式由 Highcharts 提供。

庫(kù)存工具

Highcharts 庫(kù)存工具是 Highcharts 中的一項(xiàng)可選功能。您可以啟用整個(gè)股票工具圖形用戶(hù)界面 (GUI)，該界面允許用戶(hù)根據(jù)自己的需要添加指標(biāo)和震蕩指標(biāo)，也可以通過(guò) Javascript 將特定的股票工具添加到您的 Web 應(yīng)用程序。

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

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ì)圖表樣式

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

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

• Highcharts.CSSObject：這是圖表樣式的默認(rèn)方法。它基于 Highcharts 提供的 stockChart 類(lèi)中的選項(xiàng)對(duì)象構(gòu)建，用于定義圖表中各個(gè) SVG 元素和 HTML 元素的視覺(jué)外觀。
• styledMode: boolean：默認(rèn)為 false。但是，在樣式模式下，不會(huì)通過(guò)選項(xiàng)對(duì)象將任何表現(xiàn)屬性應(yīng)用于 SVG。因此，需要 CSS 規(guī)則來(lái)設(shè)置圖表的樣式。

本文將使用 Highcharts 默認(rèn)樣式。因此，在選項(xiàng)對(duì)象內(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)，使您可以將原始數(shù)據(jù)轉(zhuǎn)換為視覺(jué)上引人注目且可操作的見(jiàn)解。通過(guò)利用 Highcharts 的靈活性，您可以自定義蠟燭圖以與您的品牌保持一致，增強(qiáng)用戶(hù)體驗(yàn)并有效傳達(dá)市場(chǎng)趨勢(shì)。無(wú)論您是構(gòu)建財(cái)務(wù)儀表板還是增強(qiáng)交易平臺(tái)，設(shè)計(jì)和實(shí)現(xiàn)定制可視化的能力都是當(dāng)今數(shù)據(jù)驅(qū)動(dòng)領(lǐng)域的一項(xiàng)關(guān)鍵技能。

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

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