ホームページ > 記事 > ウェブフロントエンド > ローソク足チャートを使用してハイチャートにデータを表示する方法
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 }] });
上記のコードでは、次の部分が追加されていることがわかります。
プロパティは、X 軸のラベルをデータ インデックスに設定します。
このプロパティは、Y 軸ラベルをドル記号に設定します。これは、実際のニーズに応じて変更することもできます。
このプロパティは、始値、最高値、最低価格、終値などの情報を含むプロンプト ボックスの形式を調整します。
このプロパティは、ローソク足チャートのスタイルを設定するために使用されます。ここでは、上昇色と下降色、境界線の色を指定し、線幅を 1 に設定します。
<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 を使用してローソク足チャートを表示するプロセス全体です。上記のサンプル コードを通じて、いくつかの主要な領域を学ぶことができます: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>
以上がローソク足チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。