円グラフ

円グラフが描かれています。各項目を表す領域の上に、割合と実数が表示されています。このグラフの右には凡例があります。

JavaScriptから円グラフをcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの円グラフを柔軟に描画できます。

ダウンロード

Release Date Size (byte) Download
1.0.2 2009-07-17 121,598 glaph_circle_1_0_2.zip

使い方

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要素には次のようなグラフが描画されます。[実際のサンプルを見る]

円グラフサンプル2

オプションリファレンス

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

オプションプロパティ一覧
プロパティ 初期値 説明
backgroundColor null canvas全体の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
shadow true trueを指定すると、円グラフと凡例にシャドーを描画します。falseを指定すると非表示になります。
border false trueを指定すると、円グラフの各項目に境界線が表示されます。falseを指定すると非表示になります。
caption false trueを指定すると、円グラフ内に各項目名称が表示されます。falseを指定すると非表示になります。
captionNum true trueを指定すると、円グラフ内に各項目の数値が括弧内に表示されます。falseを指定すると非表示になります。ただし、trueを指定しても、項目の比率が5%以下の場合は表示されません。
captionRate true trueを指定すると、円グラフ内に各項目の比率が表示されます。falseを指定すると非表示になります。
fontSize "12px" 円グラフ内に表示される文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
fontFamily "Arial,sans-serif" 円グラフ内に表示される文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
textShadow true trueを指定すると、円グラフ内に表示される文字にシャドーが表示されます。falseを指定すると非表示になります。
captionColor "#ffffff" 円グラフ内の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
startAngle -90 円グラフの開始角度を表します。右方向を0°とした時計回りの角度を指定します。例えば、一般的な円グラフのように上方向を開始位置としたい場合は -90 を指定します。
legend true trueを指定すると、凡例が表示されます。falseを指定すると非表示になります。ただし、canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。
legendFontSize "12px" 凡例の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
legendFontFamily "Arial,sans-serif" 凡例の文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
legendColor "#000000" 凡例の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
otherCaption "other" 項目が10項目を超えている場合は、10番目以降を1つの項目にまとめられますが、そのまとめられた項目の名称を指定することができます。

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

円グラフ項目色初期値一覧
項目 初期値
01
 
rgb(24,41,206)
02
 
rgb(198,0,148)
03
 
rgb(214,0,0)
04
 
rgb(255,156,0)
05
 
rgb(33,156,0)
06
 
rgb(33,41,107)
07
 
rgb(115,0,90)
08
 
rgb(132,0,0)
09
 
rgb(165,99,0)
10
 
rgb(24,123,0)

バージョンアップ履歴

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-2012 futomi http://www.html5.jp/

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

謝辞

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