この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
小ネタです。
先日下記エントリで『Plotly』をPythonで試す際の手順(インストール及び環境設定)について投稿しましたが、Javascriptで利用するケースも局面としては多いのかな？と思い、簡単にではありますが手順について見ていこうと思います。
概要
plotly.jsはJavascript用の無料のオープンソースグラフィックライブラリです。スタンドアロンで動作し、Plotly.jsを使用することで統計チャートや3Dグラフ、科学的なチャートSVG及びタイルマップ、財務チャート等の数十にも及ぶチャートの視覚化を作成することが出来ます。
セットアップ
公式サイトで紹介されている方法の中から幾つかピックアップして試してみます。
nodeモジュールとしてロード
npmコマンドでインストールが可能です。
## インストール実施.
% npm i --save plotly.js-dist-min
npm WARN saveError ENOENT: no such file or directory, open '/Users/xxxxxxxxxxxxx/Desktop/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/xxxxxxxxxxxxx/Desktop/package.json'
npm WARN Desktop No description
npm WARN Desktop No repository field.
npm WARN Desktop No README data
npm WARN Desktop No license field.
+ plotly.js-dist-min@2.2.1
added 1 package from 1 contributor and audited 1 package in 1.246s
found 0 vulnerabilities
## インストール内容の確認(npm llコマンド)
% npm ll
│ /Users/xxxxxxxxxxxxxxxxxx/Desktop
│
└── plotly.js-dist-min@2.2.1
Ready-to-use minified plotly.js distributed bundle.
git+https://github.com/plotly/plotly.js.git
https://github.com/plotly/plotly.js#readmenode.js上で以下の形式で利用することが出来るようになります。
// ES6 module
import Plotly from 'plotly.js-dist-min'
// CommonJS
var Plotly = require('plotly.js-dist-min')スクリプトタグを経由してロード
HTMLのscriptタグ経由で呼び出すことも可能です。newPlotメソッドを使い、dataとlayoutで指定された図をgdというdiv要素に描画しています。plotly.jsの詳細については下記を参照。
plotly-js-via-script-tag.html
<head>
<script src="https://cdn.plot.ly/plotly-2.2.0.min.js"></script>
</head>
<body>
<div id="gd"></div>
<script>
Plotly.newPlot("gd", /* JSON object */ {
"data": [{ "y": [1, 2, 3] }],
"layout": { "width": 600, "height": 400}
})
</script>
</body>結果の表示:
Plotly.jsはFastlyによる無料CDNサービスでサポートされてます。
軽量化(minified)されていないバージョンのものもCDN経由で利用することが可能です。(plotly.js v2以降でCDNを使用するには、"latest"では無く、plotly.jsの正確なバージョンを指定する必要があるらしいので注意)
<script src="https://cdn.plot.ly/plotly-2.2.0.js" charset="utf-8"></script>まとめ
という訳で、チャート描画ライブラリ『Plotly』のJavascript版『Plotly.js』のセットアップ手順の紹介でした。
Python版同様、こちらのライブラリも色々試してみようと思います。
42
