Angularでchart.jsを使う

Angularでグラフを使いたくなったので、JavaScriptのライブラリchart.jsを利用したいと思いました。このライブラリをAngularから利用するには、ng2-chartsライブラリが必要なようなので、合わせてインストールしました。

ng2-chartsのインストール

npmでng2-chartsとchart.jsをインストールします。npmには、chartjsという.(ピリオド)を含まないライブラリもあるので指定する際は間違えないようにしましょう。

> npm install ng2-charts chart.js
...

基本

インストールが終わったらコンポーネントを次のように設定します。この設定はchart.jsバージョン3系以降の書き方です。それ以前のバージョンを使っている場合は記述が少し異なるので注意してください。

chart.component.html

<canvas baseChart
 [type]="chartType"      
 [datasets]="chartDatasets" 
 [labels]="chartLabels" 
 [options]="chartOptions" 
 [legend]="chartLegend">

html側でバインドしたcanvasの属性をScript側で記述します。

chart.component.ts

...
import { ChartType,ChartOptions} from 'chart.js';

export class ChartComponent implements OnInit {

  public chartType:ChartType='line';
  public chartOptions:ChartOptions={};
  public chartLabels:string[]=[];
  public chartLegend:boolean=true;
  public chartDatasets:any={};
  ...

これでコンパイルが通るかと思ったのですが、エラーが出てしましました。

error NG8002: Can't bind to 'chartType' since it isn't a known property of 'canvas'.

インストールしただけでは使えないそうで、app.module.tsに次のように記述を加えます。

app.module.ts

...
import { NgChartsModule } from 'ng2-charts';
...
@NgModule({
...
imports: [
...
ChartsModule
]
...
})
export class AppModule { }

この記述が基本形となります。

カスタマイズ

先の基本の状態に対して、スクリプト経由で値を設定しています。chartOptionsで、y軸の目盛りを2種にするなどといった設定が可能です。

またこの後示すサンプルでは「chartType」はline(折れ線)のまま変更しませんが、pie(円)やbar(棒)グラフなども設定でき、種類により設定可能なオプション項目も変わってきます。

chart.component.ts

...
this.cahrtOptions = {
  responsive: true,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  plugins: {
    legend: {
      display: true,
      position: 'top',
    },
    title: {
      display: true,
      text: 'タイトル'
    }
  },
  scales: {
    y: {
      type: 'linear',
      display: true,
      position: 'left',
    },
    y1: {
      type: 'linear',
      display: true,
      position: 'right',
      grid: {
        drawOnChartArea: false,
      },
    },
    y2: {
      type: 'linear',
      display: false,
      position: 'right',
      min: 20,
      max: 21,
      ticks: {
        stepSize: 1
      },
      grid: {
        drawOnChartArea: false,
      },
    },
  }
};

オプションの部分を順に説明していきます。

responsive
responsiveの値にtrueを設定するとブラウザの拡大縮小に合わせてグラフも伸縮するようになります。
intaraction
グラフ上のマウスの動きに呼応したツールチップの表示を設定しています。詳しくは公式ページを確認してもらえればと思いますが、「mode:index」と「intersect:false」でマウスカーソルの一番近い場所にあるy軸の全値を常に表示するようになります。「intersect:true」とするとマウスカーソルがy軸上のいずれかのプロットにあたった時のみの表示になります。
plugins
pluginsの項目では凡例とタイトルの設定をしています。
- legend
  legendは凡例の設定です。displayで表示の有無を設定し、legend:の値を(top,left,right,bottom)で指定することにより凡例をどこに表示させるか決めます。
- title
  titleはそのグラフのタイトルです。
  
  titleはデフォルトでは表示しないようになっているので、displayにtrueを指定しています。
scales
scalesでy軸の目盛りを設定しています。オブジェクト毎に違う範囲の目盛りを設定できます。ここではy,y1,y2を設定しています。
- type
  typeのlinearは一定間隔の目盛りを意味します。
- display
  displayは目盛りの表示をするかです。
- position
  positionは表示の位置を右か左で(left,right)指定します。
- min max
  minとmaxを設定することで表示範囲を決めることができます。範囲を超えた部分は表示されません。
  
  ここでは無効な範囲を指定して順位のグラフを表示させない設定にしています。というのも順位は通常1位が上10位が下に来てほしいのですが、そのような目盛りの設定ができません。そのため表示しないようにし、ツールチップにだけ表示させるような回避策をとっています。
- ticks stepSize
  ticksのstepSizeは目盛りの増分です。
- grid drawOnChartArea
  gridオブジェクトのdrawOnChartAreaをfalseにするとyの2軸目のスケールの升目を引きません。

chartDatasetプロパティにはChartDataset型を定義するべきなのですが、うまくデータをセットできなかったのでanyを使って定義しました。

次の構造のオブジェクトの配列をchartDatasetに代入することでグラフが線画されます。

chart.component.ts

{
 data: [1,2,3],
 label: 'legendLabel',
 borderColor: 'color',
 backgroundColor: 'color',
 yAxisID: 'name'
}

ここでは、平均販売数、平均単価、人気順位、販売順位用にオブジェクトを作りました。この詳細は次のようになります。

data
dataにはy軸の値となるnumber配列をセットします。
label
凡例用のラベルをセットします。
borderColor(オプション)
borderColorは線とプロットの外周の色になります。'#4dc9f6'といった指定の他'red'という形でも指定できます。確認していませんが、cssの色指定に準じていると思います。
backgroundColor(オプション)
backgroundColorはプロットの色になります。色の指定方法はborderColorと同じです。
yAxisID(オプション)
yAxisIDに先に作成したスケール名を指定して、どのスケールで表示するかを決めます。

x軸用のラベルは文字列の配列としてhtmlにバインドしているプロパティにセットします。この値とdataとは配列のインデックスの添字で結びつきます。もしラベルより多くデータがあった場合は表示されません。データの方が少なかった場合はそこまでで線が途切れます。

chart.component.ts

...
 labels=['20/08','20/09','20/10','20/11','20/12','21/01','21/02','21/03','21/04','21/05','21/06','21/07','21/08'];
 this.chartLabels=labels;
 
 data1=[0,0,0,0,0,0,0,0,0,0,50.288,0,0];
 legendLabel1='平均販売数';
 this.chartDatasets.push({
  data:data1,
  label:legendLabel1,
  borderColor: '#f67019',
  backgroundColor: '#f67019',
  yAxisId: 'y'
 });
 ...

投稿:2021/12/10 - 更新: facebookで共有 twitterで共有 pocketに追加

Angularでchart.jsを使う

ng2-chartsのインストール

基本

カスタマイズ

close close

投稿:2021/12/10 - 更新:　