AngularによるWebアプリ開発⑦~ngx-chartsで折れ線グラフをプロットする

Angularでのグラフプロット

angularでグラフ作成を行うライブラリはngx-chartsが有名ですが、ngx-chartsを使った円グラフや棒グラフのプロット方法はqittaに解説記事があったのですが、株価チャートのような折れ線グラフのプロット方法については日本語の記事がざっと見た感じ当たらなかったので、保存用に書いておこうと思います。

【作業環境】

  • Angular8.2.3

ngx-chartsのインストール

# モジュールをインストールする
$ npm install @swimlane/ngx-charts --save

# コンポーネントを追加する
$ ng generate component ngplot-sample

ngx-chartのバージョンとAngularのバージョンの対応はhttps://swimlane.gitbook.io/ngx-charts/changelog

を参照してください。最新版を古いバージョンのAngularで使おうとするとエラーが出ることがあります。

<app.module.ts>

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
~~~~
~~~~
import { NgplotSampleComponent } from "./ngplot-sample/ngplot-sample.component"; //これを追加
import { NgxChartsModule } from "@swimlane/ngx-charts"; //これを追加

@NgModule({
  declarations: [
    AppComponent,
    ~~~~
    ~~~~
    NgplotSampleComponent,//これを追加
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ~~~~
    ~~~~
    NgxChartsModule,//これを追加
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<app-routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
~~~~
import { NgplotSampleComponent } from "./ngplot-sample/ngplot-sample.component"; //これを追加!

const routes: Routes = [
  { path: "plot", component: NgplotSampleComponent }, // これを追加!
];

~~~~
~~~~

<ngplot-sample.component.ts>

import { Component, OnInit } from "@angular/core";
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root",
})
@Component({
  selector: "app-ngplot-sample",
  templateUrl: "./ngplot-sample.component.html",
  styleUrls: ["./ngplot-sample.component.css"],
})
export class NgplotSampleComponent implements OnInit {
  // グラフの表示サイズ
  view: any[] = [700, 400];
  //色設定
  colorScheme = {
    domain: ["#5AA454", "#A10A28", "#C7B42C", "#AAAAAA"],
  };
  //チャートに表示するデータ
  sampleData = [
    {
      name: "btc_jpy",
      series: [
        { name: "2020/03/01", value: 941263 },
        { name: "2020/03/02", value: 927433 },
        { name: "2020/03/03", value: 891997 },
        { name: "2020/03/04", value: 838375 },
        { name: "2020/03/05", value: 814149 },
        { name: "2020/03/06", value: 796400 },
        { name: "2020/03/07", value: 821648 },
        { name: "2020/03/08", value: 825701 },
      ],
    },
  ];

  // チャートの設定
  legend: boolean = true;
  showLabels: boolean = true;
  animations: boolean = true;
  xAxis: boolean = true;
  yAxis: boolean = true;
  showYAxisLabel: boolean = true;
  showXAxisLabel: boolean = true;
  xAxisLabel: string = "Year";
  yAxisLabel: string = "Population";
  timeline: boolean = true;

  constructor() {}

  ngOnInit() {}
}

<ngplot-sample.component.html>

<ngx-charts-line-chart [view]="view" [scheme]="colorScheme" [legend]="legend" [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel"
  [timeline]="timeline" [results]="sampleData" (select)="onSelect($event)" (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)">
</ngx-charts-line-chart>

[results]にプロットするデータを指定します。

http://localhost:4200/plotにアクセスすると以下のような画面が表示されます。

今回は固定の値を使いましたが、実際にはAPIを叩いてデータを取得して整形するといった処理が必要になってきます。

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする