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

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

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

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

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

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

ローソク足の作成

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

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

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

はじめる

Highcharts の使用を開始するには、まず Highcharts をダウンロードする必要があります。 Highcharts には、プロジェクトに Highcharts を?qū)毪工毪郡幛韦い膜违抓伐绁螭靡猡丹欷皮い蓼?。次のいずれかを選択できます:

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

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

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

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

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

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

<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 が提供する基本的なスタイルを備えたシンプルなローソク足を提供します。

ストックツール

ハイチャート株式ツールは、ハイチャートのオプション機(jī)能です。ストック ツールのグラフィカル ユーザー インターフェイス (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
      },
    ],

現(xiàn)在あるものは次のとおりです:

チャートのスタイルを設(shè)定する

グラフのスタイルを開始する前に、まずグラフを構(gòu)成するさまざまな部分を理解する必要があります。

Highcharts では、チャートのスタイルを設(shè)定する 2 つの方法が提供されています。

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

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

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

最終的なチャートは次のようになります:

結(jié)論

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

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

以上がデータの視覚化: ハイチャートを使用してスタイル付きの暗號(hào)通貨ローソク足を作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。