概要

Plotly.js を Webpacker で使う場合のセットアップ方法について。

ライブラリのインストール

Plotly.js 本体と Webpack を使う場合に必要になるローダーをインストールします。

yarn add plotly.js-dist ify-loader

Webpacker の設定

ローダーの設定を追加します。

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

const ifyLoader = {
  test: /\.js$/,
  loader: 'ify-loader'
}

environment.loaders.append('ify', ifyLoader)

module.exports = environment

Plotly.js 本体を読み込みます。

// app/javascript/packs/application.js
// ...略
window.Plotly = require("plotly.js-dist")

使ってみる

ビューでコードを書き、グラフが描写されていれば成功です。

<div id="tester" style="width:600px;height:250px;"></div>
<script>
  TESTER = document.getElementById('tester');
  Plotly.newPlot( TESTER, [{
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 4, 8, 16] }], {
    margin: { t: 0 } } );
</script>