canvasタグ→グラフの生成
「canvas」タグで「グラフを作成」する場合は、こちらの「html5.jp」の公開ホームページ のライブラリーの中から「グラフ」を選択して、ライブラリーの入った圧縮フォルダをダウンロードして、 「グラフ」の設定をします。
今回は、「円グラフ」を設定してみます。
「円グラフ」の設定の説明は、こちらの「html5.jp」の「円グラフ」の設定のページ でも解説されているので、そちらの方も参考にしてください。
こちらの「html5.jp」の「円グラフ」 のライブラリーの圧縮フォルダをダウンロードします。
「graph_circle_x_x_x.zip」を解凍し、「html5jpフォルダ」をウェブサーバにそのままアップロードします。 グラフを表示させたいHTMLには次のタグを記述します。
＜div＞＜canvas width="400" height="300" id="sample"＞＜/canvas＞＜/div＞
- canvas要素は、必ずdiv要素で囲む
- canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定する
- canvas要素には、必ずid属性を記述する
次に、html文書の＜head＞～＜/head＞内の＜script＞～＜/script＞内に、 その「canvas」タグの情報を設定します。
＜script type="text/javascript" src="../html5jp/graph/circle.js"＞＜/script＞
＜script type="text/javascript"＞
onload = function() {
draw1();
draw2();
};
function draw1() {
var cg = new html5jp.graph.circle("sample1");
if( ! cg ) { return; }
var items = [
["Windows7", 750],
["Macintosh", 150],
["WindowsXP", 50],
["iPhone", 50]
];
cg.draw(items);
};
function draw2() {
var cg = new html5jp.graph.circle("sample2");
if( ! cg ) { return; }
var items = [
["Chrome20", 650],
["Opera9.8", 100],
["Firefox13", 100],
["InternetExplorer9", 50],
["InternetExolorer8", 50],
["Safari5.1", 50]
];
cg.draw(items);
};
＜/script＞
絵画の仕様
- 描画可能な項目は最大10個です。10個を超えた項目を指定すると、10個目以降の項目を other という項目名で1項目にまとめられます。 なお、other という表記はオプションで変更可能です。
- 項目の数値（括弧内の数字）は、項目比率が5%以下の場合は表示されません。
- canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。
上記のようにhtml文書に正しく記述して、「canvas」タグを使用すると、 下の図のようになります。
このサイトのユーザーのPC環境（ OS ）
このサイトのユーザーのPC環境（ WEBブラウザ ）
