ローソク足チャートを使用してハイチャートにデータを表示する方法

Highcharts は、さまざまな形式のデータを表示できる非常に人気のある JavaScript グラフ ライブラリです。ローソク足チャートは株式などの財務データを表示することに特化したチャートの一種で、始値、終値、最高値、最安値などの情報を直感的に表示することができます。この記事では、ローソク足チャートを使用してデータをハイチャートに表示する方法と、具体的なコード例を紹介します。

1. 準備

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>

2. コンテナーの作成

ハイチャート チャートを表示するには、まずコンテナー要素 (通常は div タグ) を作成し、ID を指定する必要があります。例:

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

ここでは、チャート コンテナの ID を「chart-container」に設定します。

3. データの設定

ここでは、ローソク足チャートを表示するために偽のデータを生成する必要があります。 Faker.js ライブラリを使用してランダム データを生成し、それをハイチャートで必要なデータ形式にフォーマットすることができます。以下は、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
  }]
});

上記のコードは、「chart-container」コンテナーにローソク足チャートを作成します。データは、以前に生成されたランダム データを使用します。その中には次のものがあります:

• type: 'candlestick' は、チャート タイプをローソク足チャートとして指定します。
• title: { text: '株価データ' } グラフのタイトルを「株価データ」に設定します。
• series: [{ data: data }]データ系列を指定し、以前に生成したランダムデータをデータ系列として設定します。

5. カスタマイズされたスタイル

デフォルトのローソク足チャートのスタイルはニーズを満たしていない可能性があるため、スタイルをカスタマイズする必要があります。より豊富なスタイル効果を可能にする、もう少し複雑なサンプル コードを次に示します。

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 に設定します。

6. 概要

ハイチャートを使用してローソク足チャートを表示することは、それほど複雑ではありません。まずデータを準備し、次にコンテナ要素を作成して 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>
  


  <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 インスタンスでツールヒントの形式を設定し、プロンプトの内容を詳細に設定します。
• グラフの内容を説明するタイトルを設定します。

ハイチャートの基本と JavaScript の基本構文を理解していれば、上記のコードは簡単に理解できるはずです。初心者の場合は、最初にハイチャートの関連スキルを習得できます。上級の技術エンジニアにとっても、この記事を読むことは非常に有益です。フロントエンドのチャート視覚化の技術的必要性は依然として高まっています。この記事も役立つと思います。前進するための強固な基盤。

以上がローソク足チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。