Skip to content

Instantly share code, notes, and snippets.

@pn11
Last active Dec 17, 2020
Embed
What would you like to do?
JSROOTの使い方

JSROOTの使い方

とりあえずROOTファイルを置いてWebブラウザで見れるようにする方法。マウスで範囲を指定したり、右クリックで軸をLogにしたりできる。ROOTファイルではなくJSONでデータを渡すことが推奨されているけど、とりあえずこっちで。

https://root.cern.ch/js/3.4/demo/example_file.htm の真似をしてやってみる。このHTMLをそのまま自分のサーバーに置けば多分動作するはず。このままだとJavaScriptとROOTファイルがCERNに置いてあるので、これも自前にしたい。

htmlのソースを見るとJSRootCor.min.jsというのを呼び出している。JavaScriptの自動生成されたのか中身はごちゃごちゃなので見なかったことにする。このJavaScriptはJSROOTのソースをダウンロードすると入っているので、

からダウンロードする。(2015/04/20現在はver.3.4)

ROOTファイルは適当に自分で作ればよい。例えばhttps://root.cern.ch/root/html/TH1.htmlに書いてあるように

TH1F h1("h1", "histo from a gaussian", 100, -3, 3);
h1.FillRandom("gaus", 10000);
h1.SaveAs("test.root");

とすればh1という名前のTH1Fが入ったtest.rootができるので、これと、さっきダウンロードしたJSROOTのソースをサーバーの適当な場所に置いて、以下のようなHTMLを置くと動く。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <meta http-equiv="X-UA-Compatible" content="IE=Edge; text/html">

   <title>Reading object from the ROOT file</title>

   <script src="JsRoot34/scripts/JSRootCore.min.js?io&2d&onload=createGUI" type="text/javascript"></script>

   <script type='text/javascript'>
	
      function createGUI() {
         var filename = "test.root";
         new JSROOT.TFile(filename, function(file) {
           file.ReadObject("h1;1", function(obj) {
               JSROOT.draw("drawing", obj, "hist");
            });
         });
      }
   </script>

</head>

<body>
  <div id="drawing" style="width:800px; height:600px"></div>
</body>

</html>

見ればすぐわかるけどJSRootCor.min.jsの場所は

<script src="JsRoot34/scripts/JSRootCore.min.js?io&2d&onload=createGUI" type="text/javascript"></script>

というところで指定している。また、ROOT fileは

var filename = "test.root";

で指定していて、ヒストグラムなどのオブジェクトの名前は

file.ReadObject("h1;1", function(obj) {  /* --- */  }

で指定している。これで、とりあえず任意のヒストグラム(少なくともTH1とTH2)はWeb上で見れるようになった。あと、TCanvasもDrawできたので、とりあえずCanvasにしてしまえば何でも書ける(TLegendとか、X軸を時間にするとか何でもできる)。

To do的な

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment