数据可视化：如何使用 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中文网其他相关文章！