JSGraph

スタイル：

ソース

jsgraph (GitHub)

特徴

使い方

簡単な使い方

  1. <script src="jsgraph.js" type="text/javascript"></script>
    で jsgraph.js を読み込む。
  2. <div id="mygraph" style="width: 800px; height: 500px;"></div>
    等として、グラフ用の領域を確保する。
  3. graph = new JSGraph('mygraph');
    で JSGraph オブジェクトを生成。
  4. graph.load(file1, file2, ....)
    でサーバにあるデータファイル file1, file2, ... を読み込んでグラフ を表示します。<body onload="graph.load(file1, file2)">の様に html ファイルの読み込みが完了してから実行するようにしてください。
  5. サンプル

詳細な使い方

  1. <script src="jsgraph.js" type="text/javascript"></script>
    で jsgraph.js を読み込む。
  2. <div id="mygraph" style="width: 800px; height: 500px;"></div>
    等として、グラフ用の領域を確保する。
  3. graph = new JSGraph('mygraph');
    で JSGraph オブジェクトを生成。
  4. data = new Data();
    で Data オブジェクトを生成。
    1. data.read_data(s, [nx, ny, [FS,] [RS]]);
      で値を入力。s をレコードセパレー タ RS、フィールドセパレータ FS で配列に変換し、nx 番目のフィー ルドを x データ、ny 番目のフィールドを y データとして Data オ ブジェクトに保存します。２番目以降の引数を指定しない場合は 「nx=1, ny=2, FS=new RegExp("[ ,\t]+"), RS="\n"」となります。
    2. data.add_data(x, y);
      というメソッドも使用できます。
    3. data.load(path, [nx, ny, [FS,] [RS]]);
      で XMLHttpRequest によるデータ取得も出来ます。 data.load(path) でデータ取得した場合は
      data.wait(function(){graph.autoscale(); graph.draw()});
      の様に data.wait(func) でデータの取得を待ってからグラフを描 画してください。
  5. data.set_color('#0000ff');
    data.set_text('Data2');
    でデータの描画色、キャプションを指定。
  6. data.set_text(style);
    でデータの表示スタイルを設定。
    style は "r" は■、"c" は●、"l" は線で表示。また "lr", "lc" で各々 ■と線、●と線で表示します。デフォルトは "c"。
  7. graph.add_data(data);
    で JSGraph オブジェクトにデータ追加。
  8. scale_x_type(type), scale_y_type(type) で軸のタイプを選択。x 軸は "linear", "log", "unix", "mjd" から、y 軸は "linear", "log" から軸 の種類を選べます。x 軸の "unix", "mjd" は x の値をそれぞれ1970/1/1 からの通算秒数、MJD (修正ユリウス日) と解釈して西暦で軸の目盛を表 示します。いまのところ一時間満の範囲を表示させる場合は使いものにな りません。
  9. graph.autoscale();
    で軸スケールを自動設定します。
  10. グラフのタイトル、x, y 軸のキャプションはそれぞれ
    graph.title.set_text("Title");
    graph.caption_x.set_text("x");
    graph.caption_y.set_text("y");
    で変更できます。
  11. graph.draw();
    でグラフを描画。

今後の予定

参考文献

履歴

Return