チャートの使い方.アングル13 +プロジェクト

チャートは最高ではない場合でも、最高のデータを可視化するために使用することです.すべての開発者は、プロジェクト内のグラフを使用する必要があります.このチュートリアルでは、グラフを使用してプロジェクトにグラフを追加する方法を示します.js
注意:このチュートリアルでは、書き込み時に最新バージョンを使用しています.

アングル13.3.1

チャート.JS〜3.7.1

始める

最初に新しい角度プロジェクトを作成する必要があります.

ng new angular-chart-js-tutorial

ルーティングとCSSは選択しません.
その後、グラフ自体の新しいコンポーネントを作成します.プロジェクトファイルに移動し、次のコマンドを使用します.

ng g c components/chart

私はショートハンドを使っていますgenerate component とコンポーネントの新しいファイルを作成します.
完了すると、プロジェクトエディターを開き、「app . component . html」ファイルに移動します.一度、既存のコードを次のように置き換えます.

<h1>Chart.js Example</h1>

<app-chart>

</app-chart>

チャートの作成

「コンポーネント」ファイルの「Chart . component . html」ファイルに行きましょう.

<div class="chart-container" style="width: 800px; height: 600px;">
    <canvas id="my-chart">
    </canvas>
</div>

チャート.JSは、キャンバス要素を使用してグラフを描画します.「Chart . component . ts」ファイルに切り替えて、次のインポートを追加します.

import {Chart, ChartConfiguration, ChartItem, registerables} from 'node_modules/chart.js'

次に、メソッドを作成し、ngOnInit() メソッド.このメソッドはチャートを作成する責任があります.コードは次のようになります.

ngOnInit(): void {
    this.createChart()
}

createChart(): void {

}

インcreateChart(): void 方法は、いくつかの手順に沿って従う必要があります.チャートを登録することから始めてください.

Chart.register(...registerables);

今、我々のチャートが使用される予定であるデータを設定します.

const data = {
      labels: ['January','February','March','April','May'],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [10, 5, 2, 20, 30, 45],
      }]
};

チャート.JSは、オプションを設定することでグラフ自体をカスタマイズすることもできます.

const options = {
      scales: {
        y: {
          beginAtZero: true,
          display: false
        }
      }
    }

すべてのこれらのオプションはゼロからY軸を開始し、クリーナー感を与えるためにY軸を隠すことです.完了したら、グラフを設定します.

const config: ChartConfiguration = {
      type: 'line',
      data: data,
      options: options
    }

私たちが作成されるグラフのタイプは、ライングラフになります.あなたはパイ、ドーナツ、バー、バブルなどの他のオプションを使用することができますすべての種類のリストの場合は、始めることができますhere . 今、チャートアイテムをつかむでしょう、チャートが表示されるキャンバス.

const chartItem: ChartItem = document.getElementById('my-chart') as ChartItem

最後に、コードの最後の行でグラフを作成します.

new Chart(chartItem, config)

結果終了

端末の結果を表示するには、端末を開きますng serve に移動し、localhost:4200 あなたのブラウザでアプリの起動が完了したら.
この結果は次のようになります

結論

チャートの詳細については.JSは、必ずチェックしてくださいwebsite , オフィシャルrepository そして、彼らに星を与えるようにしてください!
私はまた、あなたが立ち往生した場合に沿って従うためのリポジトリを作成しました.
あなたがこのポスト役に立つならば、より多くの角度と発展チップのために私に続いてくださいGitHub .
読書のおかげで、素晴らしい一日を過ごす!😄