2021年4月30日金曜日

PlotlyをWebMakerで使う

PlotlyをWeb Makerで使う

Plotlyの様々な事例を簡単に試すため、Web Maker から動かしてみる。

plotly.js のダウンロード
Web Maker でライブラリをインクルードする場合、CDN に制限があるためplotly.jsをダウンロードする。
Web Maker でのライブラリ指定
Web Maker 右上の Add Library を押下し、JS にローカルアドレスを入力する。例えば、plotly.js を xampp/htdocs/lib に配置した場合は以下の通り指定する。
```
http://localhost/lib/plotly-latest.min.js
```

【使用例】

HTML

<h1>Plotly Test</h3>
<div id="myDiv"></div>

JavaScript

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

表示例
plotly img

Written with StackEdit.

登録: 投稿 (Atom)