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

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

WBOY

发布： 2023-12-18 16:42:35

原创

1132人浏览过

如何在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个数据点的数组，每个数据点都是一个包含五个值的数组，分别为数据点的索引、开盘价、最高价、最低价和收盘价。

四、创建烛台图

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾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: '<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传入，最后设置数据、样式、标题等属性即可。当然，具体样式的设置还需根据实际情况进行调整。以下是完整的示例代码：




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

登录后复制

以上就是使用Highcharts展示烛台图的全部过程，通过上面的示例代码我们可以学到几大领域：

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

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

以上就是如何在Highcharts中使用烛台图来展示数据的详细内容，更多请关注php中文网其它相关文章！