グラフ・チャートの表し方(Svg)

グラフ


グラフは、 項目や 物理量図形に表現したものです。 17世紀デカルトにより座標の概念が確立されました。 16世紀 には、活字を使った活版印刷が普及していました。 文字ばかりでなく、楽譜数式も組版されていました。グラフも罫線活字によって組版されていたと想像されます。

┏━━━┓

┃〇  ┃

┃  ×┃

┗━━━┛


htmlでグラフやチャートを表現する方法は主にふたつ。 SvgCanvasです。 ここでは、Svgについて説明します。


16:9 4:3 -2-1.5-1-0.500.511.5221.510.50-0.5-1-1.5-2 縦軸量名 (量記号) / 量単位 横軸量名 (量記号) / 量単位
図題

縦軸と横軸には量記号と 単位 を明記します。 svgで表現した図の内部にリンクを貼るにはxlink:href属性を指定します。 svgの中ではvarタグが使えないようです。 tspan font-style = "italic"を指定します。 html中では意味的にiタグを使うよりvarタグを使った方が良いでしょう。 Microsoft ExcelやGoogle Sheetを使ってグラフを作る場合、凡例や有効数字が 学術的な図面にならないことがあるので手動で設定しましょう。


例)BASICを使ったSVGによるグラフ表現

西暦 y / 年消費電力 P / kW1990200020102020203010.08.06.04.02.00.0 L 555.555555555556 122.819022466918 L 416.666666666666 162.316256027897 L 555.555555555556 122.819022466918 L 416.666666666666 162.316256027897米沢キャンパス全域基幹スイッチ
.山形大学の 基幹通信機器 と 建物までの通信機器 の消費電力の年代別推移
02.情報処理概論より

データベースから作ったグラフの例
石炭 石油 " 産業革命 " 太平洋戦争 " 現在 165017001750180018501900195020002050600500400300200 年代 y / year 二酸化炭素濃度 C / ppm
二酸化炭素濃度

細い破線 星形
1

-0.500.511.522.52.521.510.50-0.5 電圧 V /V 電流 I /A
分解電圧
08. エネルギー化学

10020030040050012345
チャート:SVGにイメージを埋め込んだ場合
  1. エネルギーデバイス材料の使われる誘電体の構造が電気的物性に与える影響
    伊藤知之,山形大学理工学研究科修士論文(2014).

計量法 計量標準総合センター 外形線の太さ
情報処理概論
物質化学工学実験Ⅳ
卒業研究
式の表し方

山形大学大学院 理工学研究科
〒992-8510 山形県米沢市城南4丁目3-16
3号館(物質化学工学科棟) 3-3301
C1ラボラトリー
准教授 伊藤智博 0238-26-3753
http://c1.yz.yamagata-u.ac.jp/
c1@gp.yz.yamagata-u.ac.jp