PlotlyをWeb Makerで使う

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

1. plotly.js のダウンロード
   Web Maker でライブラリをインクルードする場合、CDN に制限があるためplotly.jsをダウンロードする。
2. 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.