2021年4月30日金曜日

PlotlyをWebMakerで使う

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);

Written with StackEdit.

0 件のコメント:

ただいま作業中

2022/04/13 MySTの翻訳環境作り サイドメニューをプログラムで変換可能にすること 作業の中心場所 – jupyter notebook : g:\jupyter\python pythonをwebでも可能に – g:\webapp\Doc-tools ...