AngularでPlotly.jsを利用する

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

GitHub: 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となります。

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を追加する.

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

<plotly-plot [data]="graph.data" [layout]="graph.layout" [config]="graph.config"></plotly-plot>

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,
    },
  };

表示

設定方法

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

data

よく使用する設定では以下のものがある.

• name : データ名
• showlegend : 凡例を表示するか
• hovertemplate : データにカーソルを合わせた時のツールチップの表示内容を設定する. Hover Text and Formatting in JavaScript参照
  <extra></extra>を指定するとデータ名を非表示に出来る

layout

グラフのレイアウトに関する設定が出来る.
設定項目の詳細は、JavaScript Figure Reference: layout参照

よく使用する設定では以下のものがある.

• title : グラフのタイトル
• xaxis, yaxis : 縦・横軸の設定
  • title : 軸のタイトル
  • dtick : 目盛りの間隔. 設定しないと自動で設定される
  • tick0 : 0地点の数値
  • 軸の表示の設定は、Formatting Ticks in JavaScript参照
  • fixdrange : 軸の表示幅を固定するかどうか。trueにすると利用者が変更できなくなる
• legend: 凡例に対する設定が出来る. itemclickをfalseにすると凡例をクリックしてグラフを絞り込むのを無効に出来る.

config

グラフに対する設定が出来る.
詳細は、 Configuration Options in JavaScript を参照する. ただしすべては記載されていないので、ソースを見ると、すべての設定を確認できる.

よく使用する設定では以下のものがある.

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

所感

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