如何在Highcharts中使用烛台图来展示数据-js教程-PHP中文网

如何在Highcharts中使用烛台图来展示数据

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'指定了图表类型为烛台图。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

title: { text: '股票数据' }

series: [{ data: data }]指定了数据系列，将之前生成的随机数据设置为数据系列。

五、自定义样式

默认的烛台图样式可能并不符合我们的需求，需求自定义样式。以下是一个稍微复杂一些的示例代码，可以实现更丰富的样式效果：




  
  
  <script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
  Highcharts展示烛台图示例


  <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>

登录后复制

在以上代码中，我们可以看到添加了以下内容：
xAxis.labels.formatter属性将X轴的标签设置为数据索引。
yAxis.labels.formatter属性将Y轴的标签设置为美元符号，这里也可以根据实际需要进行修改。
tooltip.pointFormat属性调整了提示框的格式，包含开盘价、最高价、最低价和收盘价等信息。
plotOptions.candlestick属性用于设置烛台图的样式，这里我们指定了上涨和下跌的颜色和边框颜色，并将线宽设为1。
六、总结
使用Highcharts展示烛台图并不是很复杂。首先我们需要准备好数据，然后创建一个容器元素指定ID，接着需要创建一个Highcharts实例并将容器ID传入，最后设置数据、样式、标题等属性即可。当然，具体样式的设置还需根据实际情况进行调整。以下是完整的示例代码：
以上就是使用Highcharts展示烛台图的全部过程，通过上面的示例代码我们可以学到几大领域：
导入 Highcharts JavaScript 文件。
导入 Faker.js JavaScript 文件。
创建带有 id 的容器元素。
🎜使用 Faker.js 生成随机数据。🎜🎜新建 Highcharts 实例，传入容器元素 ID。🎜🎜在 Highcharts 实例中定义想要展示的烛台图类型。🎜🎜将生成的数据作为 Data 属性传入 Highcharts 实例。🎜🎜为 X 轴标签和 Y 轴标签格式化数据：例如进行美元符号设置等操作。🎜🎜在 Highcharts 实例中设置烛台图的样式相关的属性：如颜色、线宽等。🎜🎜在 Highcharts 实例中设置 tooltip 的格式，超详细地设置提示内容。🎜🎜设置一个标题来描述图表的内容。🎜🎜🎜如果你了解 Highcharts 的基础知识和 JavaScript 的基本语法，上面的代码应该容易理解。对于初学者可以从中初步掌握 Highcharts 的相关技巧，对于高级技术工程师来说，通读这篇文章也是受益匪浅的，前端图表可视化方面的技术必要性还在不断上升，相信这篇文章亦能够为你提供坚实的前进基础。🎜
以上是如何在Highcharts中使用烛台图来展示数据的详细内容。更多信息请关注PHP中文网其他相关文章！