与えられた数値の列を元に、JavaScriptでSVGのrectを並べて横棒グラフを描画するデモ

与えられた複数の数値について全体からみた割合を計算し、svgのviewPortの横幅を100%として、数値に応じた幅で塗り分けています。
（メリットがあまりないですが、縦線だけで構成されている国旗などの描画にも利用できます）

指定例：glaph("10,10,10",300,30,"glaph3","red_rgba(0,0,0,0.6)_#00f");
glaph(data,glaphWidth,glaphHeight,root,color)として代入されます。

• data：複数の数値をカンマ区切りでつなぎ""でくくる
• glaphWidth , glaphHeight：svgのviewBoxの縦横の値を指定（画面上のサイズは、グラフを描画する先のdivなどや、svg自体にwidthを設定）
• root：グラフの作成場所になる要素のID
• color：data数だけ色数を指定。色値を_（アンダーバー）でつなぎ""でくくる