数据可视化：如何使用 Highcharts 创建风格化的加密货币蜡烛台图
什么是数据可视化？
数据可视化是以图片或图形形式呈现数据/信息的做法。它是一种将大型数据集或指标转换为地图、图形和图表等视觉元素的方法，这些元素对最终用户更具吸引力。
JavaScript 生态系统目前拥有多个可靠的一流数据可视化库。其中包括 D3.js、Highcharts、Charts.js、Rechart 等。但是，在本文中，我们将使用 Highcharts 来创建图表。
Highcharts 是一个 JavaScript 库，用于为 Web 和移动设备创建基于 SVG、响应式和交互式的图表。它通过 JavaScript 或 CSS 提供对图表的深度自定义。Highcharts 提供四种用于创建图表的产品类别。其中包括：
我们将使用 Highcharts Stock 创建带有振荡器和股票工具模块提供的技术指标的样式烛台。
创建蜡烛图
蜡烛图（或日本蜡烛图）是一种金融图表，交易员使用蜡烛图根据先前的模式确定股票、证券或货币可能的价格变动。蜡烛图利用在特定时间段内定期获取的关键价格点/ OHLC（开盘价、最高价、最低价、收盘价）值。
不要将 Heikin-Ashi（“平均条”）图与典型的蜡烛图混淆。虽然它与蜡烛图完全相同，但它主要与蜡烛图一起使用，因为它有助于使蜡烛图趋势更易于分析。因此，使其更具可读性。
Highcharts API 提供了创建蜡烛图和 Heikin-Ashi 图的选项。本文重点介绍蜡烛图；不过，我将在此过程中指出创建 Heikin-Ashi 图所需的权衡。让我们开始动手吧，好吗？！
入门
要开始使用 Highcharts，我们必须首先下载 Highcharts。Highcharts 提供了几种将 Highcharts 引入到您的项目中的选项。您可以选择：
我们将在本文中使用 Highcharts CDN。
HTML
HTML 的大部分内容包含用于加载 Highcharts CDN 的脚本标签。前三个是使用 Highcharts 创建的所有股票图表的必需模块。
与蜡烛图不同，如果您需要创建平均足图表，则需要单独引入模块，如下所示：
我们需要引入应用程序的最后一个 CDN 是股票工具模块。这使我们能够使用技术指标。股票工具模块必须最后加载，以便它可以从上方获取所有可用模块。
您不需要从股票工具模块加载所有技术指标，还可以根据需要加载特定指标：
最后，我们需要创建一个 HTML 元素来保存我们可以从 JavaScript 中引用的图表：
JavaScript
**引入我们的数据**
我们行程中的第一项是引入要绘制的数据。Highcharts 提供了类似于 jQuery 的 `.getJSON` 方法，用于发出 HTTP 请求。它还提供了一个用于创建图表的 `stockChart` 类。`stockChart` 类包含两个参数：
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 应用程序中。
我们将在图表中添加一个指标（加速带）和一个振荡器（超棒振荡器）。为此，我们需要编辑上面的 `series` 和 `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 默认样式。因此，在“options”对象中：
{
// general chart styles
chart: {
backgroundColor: "#1c1b2b",
borderRadius: 15,
height: 500,
styledMode: false, //if true, CSS rules required for styles
},
// config styles for the title
title: {
text: "Candlestick & Awesome Oscillator",
style: {
color: "#fff",
},
},
// styles for range selectors
rangeSelector: {
// styles for range selector buttons
buttons: [
{
type: "month",
count: 1,
text: "1m",
title: "View 1 month",
},
{
type: "month",
count: 4,
text: "4m",
title: "View 4 months",
},
{
type: "month",
count: 8,
text: "8m",
title: "View 8 months",
},
{
type: "ytd",
text: "YTD",
title: "View year to date",
},
{
type: "all",
count: 1,
text: "All",
title: "View All",
},
],
selected: 2, //The index of the button to appear pre-selected on page load.
buttonTheme: {
fill: "none",
stroke: "none",
"stroke-width": 0,
r: 8,
style: {
color: "#4F6C89",
fontWeight: "bold",
},
states: {
// styles for different button states; hover, active etc
select: {
fill: "transparent",
style: {
color: "#D76F2A",
},
},
},
},
// styles for range selector input
inputBoxBorderColor: "#4F6C89",
inputBoxWidth: 110,
inputBoxHeight: 18,
inputStyle: {
color: "#4F6C89",
fontWeight: "bold",
},
labelStyle: {
color: "#cbd1d6",
fontWeight: "bold",
},
},
// The plotOptions is a wrapper object for config objects for each series type. Main structure/ styling can be defined here
plotOptions: {
series: {
marker: {
enabled: false, //disables point markers on chart
},
},
// config style for candlestick series
candlestick: {
lineColor: "#FB1809", // The line color of the candlestick.
color: "#FB1809", // The default fill color candlestick. Can be used for falling candlesticks
upColor: "#4EA64A", //The fill color of the candlestick when values are rising.
upLineColor: "#4EA64A", // The line color for rising candlesticks.
},
// config style for acceleration bands indicator
abands: {
lineWidth: 1,
lineColor: "#20a0b1",
bottomLine: {
styles: {
lineWidth: 0.5,
lineColor: "#fcfc27",
},
},
topLine: {
styles: {
lineWidth: 0.5,
lineColor: "#2efc27",
},
},
},
},
// config styles for xAxis
xAxis: {
lineWidth: 0.1,
tickColor: "#2f2952",
crosshair: {
color: "#8e8aac",
dashStyle: "dash",
},
},
// styles and config for yAxis
yAxis: [
{
gridLineColor: "#201d3a",
lineWidth: 0,
visible: true,
height: "80%",
crosshair: {
dashStyle: "dash",
snap: false,
color: "#696777",
},
labels: {
align: "right",
x: -2,
},
resize: {
enabled: true,
lineWidth: 2,
lineColor: "#1d1c30",
},
},
{
top: "80%",
height: "20%",
gridLineColor: "#201d3a",
},
],
// styles and config for tooltip
tooltip: {
split: true,
shape: "rect",
shadow: false,
valueDecimals: 2,
// position tooltip
positioner: function (width, height, point) {
var chart = this.chart,
position;
if (point.isHeader) {
position = {
x: Math.max(
// Left side limit
0,
Math.min(
point.plotX + chart.plotLeft - width / 2,
// Right side limit
chart.chartWidth - width - chart.marginRight
)
),
y: point.plotY,
};
} else {
position = {
x: point.series.chart.plotLeft,
y: point.series.yAxis.top - chart.plotTop,
};
}
return position;
},
},
// disable stocktools GUI
stockTools: {
gui: {
enabled: false,
},
},
// config styles for navigator
navigator: {
enabled: true,
height: 50,
margin: 10,
outlineColor: "#8380a5",
handles: {
backgroundColor: "#8380a5",
borderColor: "#e9d5d5",
},
xAxis: {
gridLineColor: "#8380a5",
},
},
// config styles for scrollbar
scrollbar: {
barBackgroundColor: "#8380a5",
barBorderColor: "#8380a5",
barBorderRadius: 8,
buttonArrowColor: "#fff",
buttonBackgroundColor: "#405466",
rifleColor: "#fff",
trackBackgroundColor: "#e9d5d5",
},
// disable credits
credits: {
enabled: false,
},
}我们的最终图表如下：
结论
使用 Highcharts 创建样式化的加密货币烛台图，您可以将原始数据转换为视觉上引人注目且可付诸行动的见解。通过利用 Highcharts 的灵活性，您可以自定义烛台图以符合您的品牌定位、增强用户体验并有效传达市场趋势。无论您是构建财务仪表板还是增强交易平台，设计和实施定制可视化的能力都是当今数据驱动环境中的一项关键技能。
通过本指南中概述的步骤，您现在已经掌握了使用 Highcharts 创建动态蜡烛图的基础。探索其他自定义功能并尝试使用 Highcharts 的广泛 API，将您的加密货币可视化提升到新的水平。