如何在Highcharts中使用烛台图来展示数据-uusu优素-乐高,模型,3d打印,编程

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个数据点的示例：

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>

导入 Highcharts JavaScript 文件。
导入 Faker.js JavaScript 文件。
创建带有 id 的容器元素。
使用 Faker.js 生成随机数据。
新建 Highcharts 实例，传入容器元素 ID。
在 Highcharts 实例中定义想要展示的烛台图类型。
将生成的数据作为 Data 属性传入 Highcharts 实例。
为 X 轴标签和 Y 轴标签格式化数据：例如进行美元符号设置等操作。
在 Highcharts 实例中设置烛台图的样式相关的属性：如颜色、线宽等。
在 Highcharts 实例中设置 tooltip 的格式，超详细地设置提示内容。
设置一个标题来描述图表的内容。

如果你了解 Highcharts 的基础知识和 JavaScript 的基本语法，上面的代码应该容易理解。对于初学者可以从中初步掌握 Highcharts 的相关技巧，对于高级技术工程师来说，通读这篇文章也是受益匪浅的，前端图表可视化方面的技术必要性还在不断上升，相信这篇文章亦能够为你提供坚实的前进基础。

原文来自：www.php.cn

文章版权归作者所有，未经允许请勿转载。

THE END