plotly.jsのメモ

JavaScript用のグラフツールのほとんどがビジネスマンが使うような誇張クソグラフしか作ることができず、まともに使えるのはgoogle chartと、plotly.jsのみ、うちgoogle chartはライセンスが厳しくオフライン利用不可で、MITライセンスのplotly.jsのみがまともという結論に至ったため、使い方のメモを取っていく。

plotly.jsを使いたいけど使い方がわからんという話はコメント欄に書いていただけると調べてメモを追加するかも

基本プロットと基本機能のリファレンス

• グラフ全体のサイズ
• 軸
  • 対数軸
  • 範囲指定
• エラーバーの付け方

個別例

複数系列あり、非対称エラーバー付き棒グラフの例

var trace1 = {
  x: ['Trial 1', 'Trial 2', 'Trial 3'],
  y: [3, 6, 4],
  name: 'Control',
  error_y: {
    type: 'data',
    symmetric: false,
    array: [1, 0.5, 1.5],
    arrayminus: [0.5, 1.5, 1],
    visible: true
  },
  type: 'bar'
};
var trace2 = {
  x: ['Trial 1', 'Trial 2', 'Trial 3'],
  y: [4, 7, 3],
  name: 'Experimental',
  error_y: {
    type: 'data',
    symmetric: false,
    array: [0.5, 1, 2],
    arrayminus: [2, 1, 1],
    visible: true
  },
  type: 'bar'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv', data, layout);

画像でプロットを取得

説明書
この更新

var id = 'plotarea';
Plotly.newPlot(id , data, layout);
var element =  document.getElementById(id);
Plotly.Snapshot.downloadImage(element , { filename: "name", format: 'png'}); // width, heightも可