所属分类：web前端开发
Highcharts是一款非常流行的JavaScript图表库，它可以展示各种形式的数据。烛台图（Candlestick Chart）是一种专门用来展示股票等金融数据的图表类型，可以直观地展现开盘价、收盘价、最高价、最低价等信息。本文将介绍如何在Highcharts中使用烛台图来展示数据，并给出具体的代码示例。
一、准备工作
在使用Highcharts之前，我们需要先引入Highcharts的JavaScript文件。可以通过CDN或者下载本地文件的方式引入，这里以CDN方式为例：
<script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
另外，为了方便展示数据，这里使用了一个开源的JavaScript库Faker.js，用来生成随机数据。同样可以通过CDN方式引入：
<script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
二、创建容器
要展示Highcharts图表，首先需要创建一个容器元素，通常是一个div标签，并指定一个ID，例如：
<div id="chart-container"></div>
这里我们将图表容器的ID设置为“chart-container”。
三、设置数据
在这里，我们需要生成一些假数据来展示烛台图。我们可以使用Faker.js库来生成随机数据，然后将其格式化为Highcharts所需的数据格式。以下是一个生成100个数据点的示例：
微博登录
QQ登录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个数据点的数组，每个数据点都是一个包含五个值的数组，分别为数据点的索引、开盘价、最高价、最低价和收盘价。
四、创建烛台图
有了数据之后，我们就可以创建一个基本的烛台图了。以下是一个简单的示例代码：
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: '<span style="font-weight:bold">{series.name}</span><br>' +
'开盘价: <b>${point.open}</b><br/>' +
'最高价: <b>${point.high}</b><br/>' +
'最低价: <b>${point.low}</b><br/>' +
'收盘价: <b>${point.close}</b><br/>'
},
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传入，最后设置数据、样式、标题等属性即可。当然，具体样式的设置还需根据实际情况进行调整。以下是完整的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
<title>Highcharts展示烛台图示例</title>
</head>
<body>
<div id="chart-container"></div>
<script>
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]);
}
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: '<span style="font-weight:bold">{series.name}</span><br>' +
'开盘价: <b>${point.open}</b><br/>' +
'最高价: <b>${point.high}</b><br/>' +
'最低价: <b>${point.low}</b><br/>' +
'收盘价: <b>${point.close}</b><br/>'
},
plotOptions: {
candlestick: {
color: '#0f0',
upColor: '#f00',
lineColor: '#000',
upLineColor: '#000',
lineWidth: 1
}
},
series: [{
name: '股票价格',
data: data
}]
});
</script>
</body>
</html>