ブログ

割とコンピュータよりの情報をお届けします。

2018/8/3

plotly.jsを使ってみた

plotly.jsはオープンソースになっていると聞いて使ってみた。

ヒートマップで砂嵐を表現してみた。

この例はかなりCPUの負荷が大きい。

しかし,簡単に一応動かせるレベルで仕上がる。

(layoutのheightは指定しなければ勝手に決められる。)

heatmap以外にたくさん格好の良いチャートが作れるらしい。
heatmapでreact()を実行する場合には注意が必要。dataのオブジェクトの変更を見て更新しているようだ。
つまり,下の例では,data = [   {     zmin:0,     zmax:10,     z: z,      type: 'heatmap'   } ];としているがこの,zのオブジェクトの参照を変えずにzの要素だけを変更してreact('mydDiv', data)など実行した場合には表示の更新が後回しにされる可能性が高い。
変更を監視して必要があれば更新するのだが,どうも変更監視のコードの作り込みが簡易的に(よりコンピュータに負荷をかけないように)作られているようだ。

<!DOCTYPE html>
<html>
<head>
<script src="js/plotly.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script>
var layout = {
  colorbar: {
    autorange: false,
    range: [0, 10]
  },
  height: 600
};

var z = [];
for (var i = 0; i < 250; i++) {
  var zz = [];
  for (var j = 0; j < 120; j++) {
    zz.push(10 * Math.random());
  }
  z.push(zz);
}
var data = [
  {
    zmin:0,
    zmax:10,
    z: z, 
    type: 'heatmap'
  }
];

Plotly.newPlot('myDiv', data, layout);

setInterval(function() {
  var z = [];
  for (var i = 0; i < 250; i++) {
    var zz = [];
    for (var j = 0; j < 120; j++) {
      zz.push(10 * Math.random());
    }
    z.push(zz);
  }
  var data = [
    {
      zmin:0,
      zmax:10,
      z: z,
      type: 'heatmap'
    }
  ];
  Plotly.react('myDiv', data, layout);
}, 500);

</script>
</body>
</html>

≫ Read More

2018/08/03 コンピュータ   TakeMe