Highcharts是一款非常流行的JavaScript图表库，它可以展示各种形式的数据。烛台图（Candlestick Chart）是一种专门用来展示股票等金融数据的图表类型，可以直观地展现开盘价、收盘价、最高价、最低价等信息。本文将介绍如何在Highcharts中使用烛台图来展示数据，并给出具体的代码示例。
一、准备工作
在使用Highcharts之前，我们需要先引入Highcharts的JavaScript文件。可以通过CDN或者下载本地文件的方式引入，这里以CDN方式为例：
另外，为了方便展示数据，这里使用了一个开源的JavaScript库Faker.js，用来生成随机数据。同样可以通过CDN方式引入：
二、创建容器
要展示Highcharts图表，首先需要创建一个容器元素，通常是一个div标签，并指定一个ID，例如：
这里我们将图表容器的ID设置为“chart-container”。
三、设置数据
在这里，我们需要生成一些假数据来展示烛台图。我们可以使用Faker.js库来生成随机数据，然后将其格式化为Highcharts所需的数据格式。以下是一个生成100个数据点的示例：
let data = [];
for (let i = 0; i < 100; i++) {
let open = parseFloat(Faker.Finance.amount(1000, 5000));
let high = parseFloat(Faker.Finance.amount(open, open * 1.1));
let low = parseFloat(Faker.Finance.amount(open * 0.9, open));
let close = parseFloat(Faker.Finance.amount(low, high));
data.push([i, open, high, low, close]);
}以上代码会生成一个包含100个数据点的数组，每个数据点都是一个包含五个值的数组，分别为数据点的索引、开盘价、最高价、最低价和收盘价。
四、创建烛台图
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
有了数据之后，我们就可以创建一个基本的烛台图了。以下是一个简单的示例代码：
Highcharts.chart('chart-container', {
chart: {
type: 'candlestick'
},
title: {
text: '股票数据'
},
series: [{
data: data
}]
});以上代码将会在“chart-container”容器中创建一个烛台图，数据采用之前生成的随机数据。其中：
-
type: 'candlestick'指定了图表类型为烛台图。 -
title: { text: '股票数据' }设置了图表标题为“股票数据”。 -
series: [{ data: data }]指定了数据系列，将之前生成的随机数据设置为数据系列。
五、自定义样式
默认的烛台图样式可能并不符合我们的需求，需求自定义样式。以下是一个稍微复杂一些的示例代码，可以实现更丰富的样式效果：
Highcharts.chart('chart-container', {
chart: {
type: 'candlestick'
},
title: {
text: '股票数据'
},
xAxis: {
labels: {
formatter: function () {
return data[this.value][0];
}
}
},
yAxis: {
opposite: false,
labels: {
formatter: function () {
return '$' + this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}
' +
'开盘价: ${point.open}
' +
'最高价: ${point.high}
' +
'最低价: ${point.low}
' +
'收盘价: ${point.close}
'
},
plotOptions: {
candlestick: {
color: '#0f0',
upColor: '#f00',
lineColor: '#000',
upLineColor: '#000',
lineWidth: 1
}
},
series: [{
name: '股票价格',
data: data
}]
});在以上代码中，我们可以看到添加了以下内容：
-
xAxis.labels.formatter属性将X轴的标签设置为数据索引。 -
yAxis.labels.formatter属性将Y轴的标签设置为美元符号，这里也可以根据实际需要进行修改。 -
tooltip.pointFormat属性调整了提示框的格式，包含开盘价、最高价、最低价和收盘价等信息。 -
plotOptions.candlestick属性用于设置烛台图的样式，这里我们指定了上涨和下跌的颜色和边框颜色，并将线宽设为1。
六、总结
使用Highcharts展示烛台图并不是很复杂。首先我们需要准备好数据，然后创建一个容器元素指定ID，接着需要创建一个Highcharts实例并将容器ID传入，最后设置数据、样式、标题等属性即可。当然，具体样式的设置还需根据实际情况进行调整。以下是完整的示例代码：
Highcharts展示烛台图示例
以上就是使用Highcharts展示烛台图的全部过程，通过上面的示例代码我们可以学到几大领域：
- 导入 Highcharts JavaScript 文件。
- 导入 Faker.js JavaScript 文件。
- 创建带有 id 的容器元素。
- 使用 Faker.js 生成随机数据。
- 新建 Highcharts 实例，传入容器元素 ID。
- 在 Highcharts 实例中定义想要展示的烛台图类型。
- 将生成的数据作为 Data 属性传入 Highcharts 实例。
- 为 X 轴标签和 Y 轴标签格式化数据：例如进行美元符号设置等操作。
- 在 Highcharts 实例中设置烛台图的样式相关的属性：如颜色、线宽等。
- 在 Highcharts 实例中设置 tooltip 的格式，超详细地设置提示内容。
- 设置一个标题来描述图表的内容。
如果你了解 Highcharts 的基础知识和 JavaScript 的基本语法，上面的代码应该容易理解。对于初学者可以从中初步掌握 Highcharts 的相关技巧，对于高级技术工程师来说，通读这篇文章也是受益匪浅的，前端图表可视化方面的技术必要性还在不断上升，相信这篇文章亦能够为你提供坚实的前进基础。
