Typescript環境でplotlyを用いてデータを可視化する

4477 ワード
Angular2 TypeScript plotly TypeScript テキストリンク

D3.jsを使いやすくした可視化ライブラリに、plotly.jsというものがあります。
日本ではPythonやR方面からの利用が多いようですが、そもそものjsから利用している人があまりいないようなので、記事にしてみました。

plotlyはまだ型定義ファイルが配布されていないので、npm経由でのimportはせずに

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

と大本のhtmlでcdn経由で読み込んでしまうのが2017/07現在の最善策と思われます。

大本のhtmlでplotlyのソースを読み込んであげることで、

declare const Plotly: any;

として宣言してあげれば、問題なくts側からplotlyを操作できます。

以下は、angular2（実際はangular4ですが）でplotlyを使ったサンプルになります。

hoge.component.html
<div id="graph"></div>
hoge.component.ts
import { Component, OnInit } from "@angular/core";

declare const Plotly: any;


@Component({
    selector: "hoge",
    templateUrl: "./hoge.component.html",
    styleUrls: []
})
export class HogeComponent implements OnInit {
    public plotly: any;

    constructor() {
        this.plotly = Plotly;
    }

    public ngOnInit(): void {
        this.plotly.plot(
            "graph",
            [{
                x: [10, 11, 12],
                y: [1, 100, 1000]
            }],
            {
                title: "Typescript & angular2 & plotly"
            }
        );
    }
}

以上で、

のように、可視化することができました。ご参考まで。