2.3 関係を表すグラフ

• 以下のような単純なグラフ（ダイアグラム）を作って、 SVGデータとして、Webページに貼り付けてみましょう。
  • Graphviz を使う。
  • dot 言語で、配置すべきノード（接点、ここでは楕円）やエッジ（矢印）を記述し、
  • SVG に変換する。

  

• dot言語を編集する場所としては、
  • 普通にテキストエディタ（atom 等）で入力編集。
    • ちなみに Atom用機能拡張として language-dot もあります。
  • オンラインでgraphvizの編集実行ができるサイト（がいくつかある）。

    • Graphviz Visual Editor、 Graphviz Online、 WebGraphviz、 Edotor、 Graphviz it! など。

    • これらのサイトから（ログインせずに使えるサイトの場合）SVGファイルをどうやってダウンロードして自分のPCで使えるようにするか、については、サイトによりまちまちなので試行錯誤してみて下さい（サイトAで作ったdot言語の表記をサイトBにコピペして活用することもできるので）。

    • 画像（ラスター画像）としてコピーした場合、この先でSVGに戻すことはできない（情報の活用度が１ランク低下する）ので、このやり方は避けよう。

  • graphviz用GUIエディタ（Windows用ならば gvedit.exe がある）。
  などが使えます。
• SVGをHTMLに貼る方法もいくつかあるが、
  1. HTMLの中にSVGをべた貼り
  2. 独立したSVGファイルとして保存した上で、imgタグで引用
  の２つから選べば（当面は）いいだろう。

2.4 数値の傾向を表すグラフ

• 以下のような表があるとき、

  1	2	3	4	5	6	7	8	9	10	11	12
  88	85	80	82	71	75	72	74	78	82	73	61

  • このグラフ（棒グラフまたは折れ線グラフを想定します）を、
  • HTML で作るページの中に作成してみる。

• そのためのツールは多数あるが、とりあえず日本語でのガイドがあるという条件で、

• ここでは Chart.js を使ってみましょう。

• 使い方は、検索してみて下さい。（以下に概要だけ示す）

1. 自分のWebページ（HTMLファイルを、新しく作っても、既存のものを活用してもいい）に、 sctiptタグで、Chart.js を読み込ませる（インストールは不要）。

   

   • もちろんMarkdown ファイルから出発して、そこに必要に応じてHTMLタグを記入してもいい（右図の流れ）。

   • Chart.js の公式CDNページには、組み込むことができるファイルの候補が複数置かれているが、

   • jsファイルのうち、bundled （時刻などの表記を便利にする機能が同梱された）版は当面は選択しなくていい。

   • ....min.js のように名前に min を含むファイルをよく見かける。 これは人間の可読性を犠牲にしてファイルサイズを極力小さく（minify）したもの。 通常はこちらを選べばいい。

   • また、cssファイルも置かれているが、当座はこのcssファイルはなくても使える。

2. canvasタグを記述（グラフが表示される場所を確保）し、id （識別する名前）を付ける（名前は適当な名前でいいが、その名前を次項で使う）。

3. script タグを作り、その中に若干の JavaScriptコードを書き込む。（サンプル等からコピーしてきて編集するといい）。

   • その式の中に、上記のデータをうまく埋め込んで使う。

   • new Chart() の第１引数として渡すものは、前項のcanvas要素をプログラムから取得（getElementById） したもの（idが一致していることを確認すべし）。あるいは、そのid名を文字列として渡すという方法もある（getElementByIdを呼ぶ行を書かなくていい）。

   • new Chart() の第２引数として渡すものは、どんなグラフを描画させるか、を記述する オブジェクト（連想配列）。ブレースで囲んでその中に、（最低必要なものとして） type, data の２つのキーに対する値を渡す。

   • data に対する値は、さらにオブジェクト（連想配列）の形をとる。

   • このあたりは JavaScript言語の文法に即して行う必要がありますが、とりあえずは 見よう見まねで試みてみて下さい。

   • サンプルを２つしめしておく（参考にどうぞ）。

• この機能の使い方は、右図のイメージで、ブラウザに内蔵のJavaScriptエンジンから ライブラリ（ひとかたまりの、JavaScriptのプログラム）を読み込んで呼び出して実行させる、という使い方。