グラフを描く

下のキャンバスにJavaScriptだけでグラフを描きます。

グラフを構成する一つ一つの点は <div class="dot"></div> です。 dot クラスの定義は次のようになっています。

あとはJavaScriptでこのようなドットをたくさん描くだけです。

.dot {
  position: absolute;
  background-color: black;
  width: 3px;
  height: 3px;
  font-size: 1px;  /* これがないとIEのバージョンによって線が太くなるようです */
}

詳細はこのページのソースをご覧ください。

この方法はほとんどのブラウザで使えますが，必ずしも効率的ではありません。他の可能性としては次のものがあります。

• SVG (Scalable Vector Graphics): Adobe SVG Viewerで可能，Firefox 1.5，Opera 8でも実装 (→ SVG in Firefox - MDC)
• HTMLのcanvas要素: 別ページにまとめました。
• VML (Vector Markup Language): IE5以降

これらの中からブラウザごとに最適なものを選ぶ方法がnanto_vi氏の ブラウザ上でお絵かき で紹介されています。

奥村晴彦

Last modified: 2012-04-18 09:39:45