Html5+CSS ホームページ制作

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>

 次に、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>

絵画の仕様

 上記のようにhtml文書に正しく記述して、「canvas」タグを使用すると、 下の図のようになります。

このサイトのユーザーのPC環境( OS )

このサイトのユーザーのPC環境( WEBブラウザ )

ページトップへ