AngularでPlotly.jsを利用する

Plotly.jsをAngularで使用するためのモジュールが用意されているので、それを使用する

GitHub: [angular-plotly.js](https://github.com/plotly/angular-plotly.js)

## インストール方法
npmでインストールする。
2022/3/19時点での最新は、angular-plotly.jsが4.0.4, plotly.js-dist-minが2.11.1, @types/plotly.js-dist-minが2.3.0となります。
```bash
npm install angular-plotly.js@4.0.4 plotly.js-dist-min@2.11.1 --save
npm install @types/plotly.js-dist-min@2.3.0 --save-dev
```

インストール後、AppModuleにPlotlyModuleを追加する.
```ts
import * as PlotlyJS from 'plotly.js-dist-min';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;

@NgModule({
  ~~~
  imports: [
    ~~~
    PlotlyModule
  ],
  ~~~
})
export class AppModule { }
```

## グラフ表示
`<plotly-plot>`コンポーネントが用意されているため、こちらを使用する.

html
```html
<plotly-plot [data]="graph.data" [layout]="graph.layout" [config]="graph.config"></plotly-plot>
```
ts
```ts
  graph = {
    data: [
      {
        x: [10, 20, 30],
        y: [23, 65, 313],
        type: 'scatter',
        mode: 'lines+points',
        marker: { color: 'red' },
        name: 'data1',
        showlegend: true,
        hovertemplate: '経過日数:%{x}<br>回数:%{y}',
      },
      {
        x: [10, 20, 30],
        y: [45, 125, 289],
        type: 'bar',
        name: 'data2',
        showlegend: true,
        hovertemplate: '経過日数:%{x}<br>回数:%{y}<extra></extra>',
      },
    ],
    layout: {
      title: 'Sample Data',
      legend: {
        itemclick: false,
      },
      xaxis: {
        title: '経過日数',
        tick0: 0,
        dtick: 10,
        fixedrange: true,
      },
      yaxis: {
        title: '回数',
        dtick: 50,
        fixedrange: true,
      },
    },
    config: {
      displayModeBar: false,
      scrollZoom: false,
      //     staticPlot:true,
      responsive: true,
    },
  };
```
表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48495/7a7d6bc5-fa6a-828b-f9cd-3af91f98fa6a.png)

## 設定方法
グラフを表示する時によく使う設定をメモとして残しておきます.

### data
よく使用する設定では以下のものがある.
- name : データ名
- showlegend : 凡例を表示するか 
- hovertemplate : データにカーソルを合わせた時のツールチップの表示内容を設定する. [Hover Text and Formatting in JavaScript](https://plotly.com/javascript/hover-text-and-formatting/)参照  
	`<extra></extra>`を指定するとデータ名を非表示に出来る

### layout
グラフのレイアウトに関する設定が出来る.
設定項目の詳細は、[JavaScript Figure Reference: layout](https://plotly.com/javascript/reference/layout/)参照

よく使用する設定では以下のものがある.
- title : グラフのタイトル
- xaxis, yaxis : 縦・横軸の設定
	- title : 軸のタイトル
	- dtick : 目盛りの間隔. 設定しないと自動で設定される
	- tick0 : 0地点の数値
	- 軸の表示の設定は、[Formatting Ticks in JavaScript](https://plotly.com/javascript/tick-formatting/#layout-attributes-with-respect-to-formatting-ticks)参照
	- fixdrange : 軸の表示幅を固定するかどうか。trueにすると利用者が変更できなくなる
- legend: 凡例に対する設定が出来る. itemclickをfalseにすると凡例をクリックしてグラフを絞り込むのを無効に出来る.

### config
グラフに対する設定が出来る.
詳細は、[ Configuration Options in JavaScript ](https://plotly.com/javascript/configuration-options/)を参照する. ただしすべては記載されていないので、[ソース](https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js)を見ると、すべての設定を確認できる.

よく使用する設定では以下のものがある.
- displayModeBar : ツールバーの表示制御. falseにすると非表示に出来る
- staticPlot : ツールバーでだけでなくグラフを画像として表示する
- scrollZoom : グラフをズーム出来るかを設定する
- responsive: layoutのwidth, heightを指定せず使用すると画面幅に合わせてサイズが変更される

## 所感
Plotly.js自体も初めてでしたが、AngularのComponentが提供されているのは、便利です。