ダウンロード

使い方

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要素内に、次のJavaScriptコードを記述してください。

<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../html5jp/graph/circle.js"></script>
<script type="text/javascript">
window.onload = function() {
  var cg = new html5jp.graph.circle("sample");
  if( ! cg ) { return; }
  var items = [
    ["sample01", 150],
    ["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
  ];
  cg.draw(items);
};
</script>

前述のサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダはどこに設置しても構いません。html5jpフォルダの設置場所に合わせて、最初の2つのscript要素のsrc属性を書き換えてください。

グラフ描画処理は、前述の2つのjsファイルをロードした後に、script要素内に記述します。グラフ描画処理は、jsファイルとしてHTMLファイルと分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。

グラフ描画処理では、まず最初に円グラフ描画オブジェクトを生成します。

var cg = new html5jp.graph.circle("sample");

引数にはcanvas要素にセットされたid属性値を指定してください。もし、指定したid属性値を持つcanvas要素が見つからなかったり、canvas要素がdiv要素で囲まれていない場合は、何も返されません。

次に、グラフに描画したい項目をセットした配列を生成します。下記のように、各項目は、項目名と数値を格納した配列として定義します。

var items = [
  ["sample01", 150],
  ["sample02", 100],
	・・・
  ["sample12", 10]
];

項目を定義したら、下記のように円グラフを描画するメソッドを実行します。

cg.draw(items);

cg.drawメソッドには、先ほど定義した項目の配列を第一引数にセットします。上記スクリプトが実行されると、canvas要素には次のようなグラフが描画されます。[実際のサンプルを見る]

描画の仕様

グラフは、以下の条件に基づいて描画されます。

• 描画可能な項目は最大10個です。10個を超えた項目を指定すると、10個目以降の項目を other という項目名で1項目にまとめられます。なお、other という表記はオプションで変更可能です（詳細は後述の「オプションリファレンス」をご覧ください。）。
• 項目の数値（括弧内の数字）は、項目比率が5%以下の場合は表示されません。
• canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。

グラフのカスタマイズ

グラフの描画は、さまざまなオプションを指定することでカスタマイズすることができます。次のサンプルコードをご覧ください。

window.onload = function() {
  var cg = new html5jp.graph.circle("sample");
  if( ! cg ) { return; }
  var items = [
    ["sample01", 150, "#ff8899"],
    ["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
  ];
  var params = {
    backgroundColor: "#eeffee",
    shadow: false,
    captionNum: false,
    startAngle: -45,
    otherCaption: "その他"
  };
  cg.draw(items, params);
};

オブジェクト params に注目してください。paramsに必要なプロパティをセットし、cg.drawメソッドの第二引数にparamsを指定すると、それに応じた円グラフが描画されます。このサンプルでは、背景色を #eeffee に、シャドーを非表示に、項目の数値を非表示に、開始角度を -45°に、other の項目名を "その他" に変更しています。

このサンプルでは、もうひとつ、デフォルトとは異なるカスタマイズが施されています。項目をセットしている items オブジェクトに注目してください。各項目には項目名称と数値の2つの値を指定するだけで良いのですが、このサンプルでは、一番最初の項目にだけ3つの値がセットされています。この3つ目の値は、該当の項目の色を表します。もしデフォルトの色ではなく、自分好みの色を指定したい場合は、このサンプルのように項目ごとに色を指定してください。

上記スクリプトが実行されると、canvas要素には次のようなグラフが描画されます。[実際のサンプルを見る]

オプションリファレンス

cg.drawメソッドの第二引数に指定する params オブジェクトにセットできるプロパティは下表の通りです。

円グラフに描画される各項目の色の初期値は下表の通りです。

バージョンアップ履歴

2009-07-17 ver 1.0.1 → ver 1.0.2

• 項目の値のいずれかが0だとしてもグラフが描画できるように改良。ただし、すべての項目の値が0の場合は対応していません。

2009-03-25 ver 1.0.0 → ver 1.0.1

• IE6で標準モードでレンダリングされるページに本ライブラリーを組み込んだ場合、グラフの表示がずれてしまう不具合を改修。
• ExplorerCanvas Release 3がリリースされたとことに伴い、本ライブラリーに同梱されているExplorerCanvasもRelease 3に更新した。これに伴い、IE8標準モードでもグラフが表示されるようになった。また、IEでもグラデーションが表現でき、円グラフの各パーツの境界線も表示できるようになった。

2007-10-08

• ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2009 futomi http://www.html5.jp/

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。

謝辞

当サイトにて配布するJavaScriptライブラリには、Internet Explorerでも利用できるようにするため、ExplorerCanvas が同梱されています。