캔들스틱 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

Highcharts는 다양한 형태의 데이터를 표시할 수 있는 매우 인기 있는 JavaScript 차트 라이브러리입니다. 캔들스틱 차트는 주식 등 금융 데이터를 표시하는 데 특별히 사용되는 차트 유형으로, 시가, 종가, 최고가, 최저가 등의 정보를 직관적으로 표시할 수 있습니다. 이 글에서는 캔들스틱 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비

하이차트를 사용하기 전에 하이차트의 자바스크립트 파일을 소개해야 합니다. 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>

2. 컨테이너 만들기

하이차트 차트를 표시하려면 먼저 컨테이너 요소(일반적으로 div 태그)를 만들고 ID를 지정해야 합니다. 예:

<div id="chart-container"></div>

여기 차트 컨테이너를 사용하겠습니다. ID는 "chart-container"로 설정됩니다.

3. 데이터 설정

여기서 캔들차트를 표시하려면 가짜 데이터를 생성해야 합니다. 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개의 데이터 포인트를 포함하는 배열을 생성합니다. 각 데이터 포인트는 데이터 포인트의 인덱스와 시가인 5개의 값을 포함하는 배열입니다. 최고가, 최저가, 종가.

4. 캔들차트 만들기

데이터가 확보되면 기본 캔들차트를 만들 수 있습니다. 다음은 간단한 샘플 코드입니다.

Highcharts.chart('chart-container', {
  chart: {
    type: 'candlestick'
  },
  title: {
    text: '股票数据'
  },
  series: [{
    data: data
  }]
});

위 코드는 이전에 생성된 임의의 데이터를 사용하여 "차트 컨테이너" 컨테이너에 캔들스틱 차트를 생성합니다. 그 중:

• 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: 'Stock Data' } 차트 제목을 "Stock Data"로 설정합니다.

series: [{ data: data }]는 데이터 시리즈를 지정하고 이전에 생성된 랜덤 데이터를 데이터 시리즈로 설정합니다.

5. 사용자 정의 스타일

기본 캔들스틱 차트 스타일은 우리의 요구 사항을 충족하지 못할 수 있으므로 스타일을 사용자 정의해야 합니다. 다음은 더욱 풍부한 스타일링 효과를 허용하는 약간 더 복잡한 예제 코드입니다.

  
  
  <script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.2/highcharts.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/Faker.js"></script>
  


  <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로 설정합니다.
• 6. 요약
• 하이차트를 사용하여 캔들스틱 차트를 표시하는 것은 그리 복잡하지 않습니다. 먼저 데이터를 준비한 다음 ID를 지정하는 컨테이너 요소를 생성한 다음 Highcharts 인스턴스를 생성하고 컨테이너 ID를 전달하고 마지막으로 데이터, 스타일, 제목 및 기타 속성을 설정해야 합니다. 물론 구체적인 스타일 설정은 실제 상황에 따라 조정해야 합니다. 다음은 전체 샘플 코드입니다.
rrreee
• 위는 Highcharts를 사용하여 촛대 차트를 표시하는 전체 프로세스입니다. 위의 샘플 코드를 통해 몇 가지 주요 영역을 배울 수 있습니다.
• Highcharts JavaScript 파일 가져오기.
• Faker.js JavaScript 파일을 가져옵니다.

  ID가 있는 컨테이너 요소를 만듭니다.

  🎜Faker.js를 사용하여 임의의 데이터를 생성하세요. 🎜🎜새 Highcharts 인스턴스를 생성하고 컨테이너 요소 ID를 전달합니다. 🎜🎜Highcharts 인스턴스에 표시하려는 촛대 차트 유형을 정의하세요. 🎜🎜 생성된 데이터를 Data 속성으로 Highcharts 인스턴스에 전달합니다. 🎜🎜X축 레이블 및 Y축 레이블의 데이터 형식 지정: 달러 기호 설정 등 🎜🎜Highcharts 인스턴스에서 캔들스틱 차트의 스타일 관련 속성(예: 색상, 선 너비 등)을 설정합니다. 🎜🎜Highcharts 인스턴스에서 툴팁 형식을 설정하고 프롬프트 내용을 매우 자세하게 설정하세요. 🎜🎜차트의 내용을 설명하는 제목을 설정하세요. 🎜🎜🎜Highcharts의 기본과 JavaScript의 기본 구문을 알고 있다면 위 코드는 이해하기 쉬울 것입니다. 초보자의 경우 처음에는 Highcharts 관련 기술을 익힐 수 있으며, 수석 기술 엔지니어에게는 이 기사를 읽는 것도 많은 도움이 될 것입니다. 앞으로 나아갈 수 있는 견고한 기반. 🎜

  위 내용은 캔들스틱 차트를 사용하여 Highcharts에 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!