データの視覚化: ハイチャートを使用してスタイル付きの暗号通貨ローソク足を作成する方法-jsチュートリアル-php.cn

データの視覚化とは何ですか?

データの視覚化は、データ/情報を絵やグラフィック形式で表現する実践です。これは、大規模なデータセットや指標を、エンドユーザーにとってより魅力的な地図、グラフ、チャートなどの視覚要素に変換する手段です。

JavaScript エコシステムには現在、データ視覚化のための信頼できる一流のライブラリがいくつかあります。その中には、D3.js、Highcharts、Charts.js、Rechart などが含まれます。ただし、この記事では、Highcharts を使用してグラフを作成します。

Highcharts は、Web およびモバイル用の SVG ベースの応答性の高いインタラクティブなグラフを作成するための JavaScript ライブラリです。 JavaScript または CSS を介してグラフを詳細にカスタマイズできます。 Highcharts では、グラフ作成用に 4 つの製品カテゴリを提供しています。これらには以下が含まれます:

Highcharts: これは、すべてのチャートで必要な基本的な Highcharts モジュールです。単純な折れ線グラフ、棒グラフ、円グラフの作成に使用できます。
Highcharts Stock: これは、アプリケーションの一般的な株価チャートとタイムラインチャートを作成するために使用されます。例としては、単純な株価チャート、ローソク足と平均足、OHLC などがあります。チャートとの対話を可能にする GUI を提供する Stock Tools モジュールを利用することもできます。
Highcharts Maps: Highcharts では、開発者がインタラクティブでカスタマイズ可能なマップを Web アプリケーションに追加できるスケマティックマップを生成するオプションも提供します。 Highcharts が提供するマップコレクションを使用するか、目的に合わせてカスタム SVG マップを作成するオプションが提供されます。
ハイチャートガント: これは、プロジェクトのスケジュールを示すために使用される特別なタイプの棒グラフです。

Highcharts Stock を使用して、Stock Tools モジュールが提供するオシレーターとテクニカル指標を備えたスタイル付きローソク足を作成します。

ローソク足の作成

ローソク足チャート (または日本のローソク足チャート) は、トレーダーが以前のパターンに基づいて株式、証券、または通貨の起こり得る価格変動を判断するために使用する金融チャートのスタイルです。これは、指定された期間にわたって定期的に取得された主要な価格ポイント/OHLC (始値、高値、安値、終値) 値を利用します。

平均足 (「平均棒」) チャートは、典型的なローソク足チャートと混同しないでください。ローソク足チャートと同じですが、ローソク足チャートの傾向を分析しやすくするために、ローソク足と組み合わせて使用されることがほとんどです。したがって、読みやすくなります。

Highcharts API には、ローソク足チャートと平均足チャートの両方を作成するためのオプションが用意されています。この記事ではローソク足チャートに焦点を当てます。ただし、途中で平均足チャートを作成するために必要なトレードオフについても説明します。手を汚してみませんか?!

はじめる

Highcharts の使用を開始するには、まず Highcharts をダウンロードする必要があります。 Highcharts には、プロジェクトに Highcharts を導入するためのいくつかのオプションが用意されています。次のいずれかを選択できます:

Highcharts ライブラリ全体をダウンロードします。ユースケースに応じて、Highcharts Stock、Maps、または Gantt ライブラリをダウンロードすることもできます。
NPM 経由で Highcharts をインストールし、モジュールとしてインポートします。これらは、React や Vue などの単一ページアプリケーションに最適です。
ファイルに直接アクセスするには、Highcharts CDN を使用します。

この記事では Highcharts CDN を使用します。

HTML

HTML の大部分には、Highcharts CDN をロードするために使用されるスクリプトタグが含まれています。最初の 3 つは、Highcharts で作成されたすべての株価チャートに必要なモジュールです。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

ログイン後にコピー

ローソク足チャートとは異なり、平均足チャートを作成する必要がある場合は、以下のようにモジュールを別途導入する必要があります。

<script src="https://code.highcharts.com/stock/modules/heikinashi.js"></script>

ログイン後にコピー

アプリケーションに組み込む必要がある最後の CDN は、Stock Tools モジュールです。これにより、テクニカル指標を活用できるようになります。ストックツールモジュールは、上から利用可能なすべてのモジュールを選択できるように、最後にロードする必要があります。

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

ログイン後にコピー

ストックツールモジュールからすべてのテクニカル指標をロードするのではなく、ニーズに応じて特定の指標をロードすることもできます。

<script src="https://code.highcharts.com/indicators/indicators.js"></script>
<script src="https://code.highcharts.com/indicators/rsi.js"></script>
<script src="https://code.highcharts.com/indicators/ema.js"></script>
<script src="https://code.highcharts.com/indicators/macd.js"></script>

ログイン後にコピー

最後に、JavaScript から参照できるチャートを保持する HTML 要素を作成する必要があります。

<div>



<h3>
  
  
  The JavaScript
</h3>

<p><strong>Bringing in our Data</strong><br>
The first item on our itinerary is to bring in the data we will be plotting. Highcharts provides a .getJSON method similar to that of jQuery, which is used for making HTTP requests. It also provides a stockChart class for creating the chart. The stockChart class takes in two parameters:</p>

ログイン後にコピー

The first parameter, renderTo, is the DOM element or the id of the DOM element to which the chart should render.
The second parameter, options, are the options that structure the chart.

Highcharts.getJSON('https://api.coingecko.com/api/v3/coins/ethereum/ohlc?vs_currency=usd&days=365', 
function (candlestick) {
  // create the chart
  Highcharts.stockChart('container', {
    title: {
      text: 'Untitled Masterpiece'
    },

    series: [
      {
        type: "candlestick",    //heikinashi for Heikin-Ashi chart
        name: "Ethereum",      //chart name
        id: "eth",             // chart id, useful when adding indicators and oscillators
        data: candlestick,      //data gotten from the API call above
      },
    ], 

yAxis: [
      {
        height: "100%",       // height of the candlestick chart
        visible: true,  
      }
    ]
  });
});

ログイン後にコピー

上記のコードは、Highcharts が提供する基本的なスタイルを備えたシンプルなローソク足を提供します。
Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts

ストックツール

ハイチャート株式ツールは、ハイチャートのオプション機能です。ストックツールのグラフィカルユーザーインターフェイス (GUI) 全体を有効にして、ユーザーがニーズに基づいてインジケーターやオシレーターを追加できるようにすることも、JavaScript 経由で特定のストックツールを Web アプリに追加することもできます。

チャートにインジケーター (加速バンド) とオシレーター (素晴らしいオシレーター) を追加します。これを行うには、上記のシリーズと yAxis オブジェクトの両方を編集する必要があります:

series: [
      {
        type: "candlestick",
        name: "Ethereum",
        id: "eth",           // chart id, useful when adding indicators and oscillators
        data: data,
      },
         {
        type: "abands",      //acceleration bands indicator
        id: "overlay",       // overlays use the same scale and are plotted on the same axes as the main series.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 0,           // the index of yAxis the particular series connects to
      },
      {
        type: "ao",          // awesome oscillator
        id: "oscillator",    // oscillators requires additional yAxis be created due to different data extremes.
        linkedTo: "eth",    //targets the id of the data series that it points to
        yAxis: 1,           // the index of yAxis the particular series connects to
      },
    ],
    yAxis: [
      {
        //index 0
        height: "80%",      //height of main series 80%

        resize: {
          enabled: true,     // allow resize of chart heights
        },
      },
      {
        //index 1
        top: "80%",         // oscillator series to begin at 80%
        height: "20%",      //height of oscillator series
      },
    ],

ログイン後にコピー

現在あるものは次のとおりです:
Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts

チャートのスタイルを設定する

グラフのスタイルを開始する前に、まずグラフを構成するさまざまな部分を理解する必要があります。
Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts
Highcharts では、チャートのスタイルを設定する 2 つの方法が提供されています。

Highcharts.CSSObject: これは、グラフをスタイル設定するデフォルトの方法です。これは、Highcharts が提供する StockChart クラス内の options オブジェクトに基づいて構築され、チャート内の個々の SVG 要素および HTML 要素の外観を定義します。
styledMode: boolean: これのデフォルトは false です。ただし、スタイルモードの場合、オプションオブジェクトを介して SVG にプレゼンテーション属性は適用されません。したがって、グラフのスタイルを設定するには CSS ルールが必要です。

この記事ではハイチャートのデフォルトのスタイルを使用します。したがって、オプションオブジェクト内では次のようになります:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

ログイン後にコピー

最終的なチャートは次のようになります:
Data Visualization: How to Create Styled Cryptocurrency Candlesticks with Highcharts

結論

Highcharts でスタイル付きの暗号通貨ローソク足を作成すると、生データを視覚的に説得力のある実用的な洞察に変換できます。 Highcharts の柔軟性を活用することで、ブランディングに合わせてローソク足チャートをカスタマイズし、ユーザーエクスペリエンスを向上させ、市場トレンドを効果的に伝えることができます。財務ダッシュボードを構築している場合でも、取引プラットフォームを強化している場合でも、カスタマイズされたビジュアライゼーションを設計して実装する能力は、今日のデータドリブンな状況において重要なスキルです。

このガイドで説明されている手順により、ハイチャートを使用して動的なローソク足チャートを作成するための基礎が整いました。追加のカスタマイズを検討し、Highcharts の広範な API を試して、暗号通貨の視覚化を次のレベルに引き上げてください。

以上がデータの視覚化: ハイチャートを使用してスタイル付きの暗号通貨ローソク足を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。