円グラフ - jsライブラリ - HTML5.JP

次の例は、windows利用率をcircle.jsライブラリを使って円グラフで描画する。

[HTML]
<div><<canvas width="400" height="300" id="sample"></canvas></div>

[JavaScript]
document.addEventListener('DOMContentLoaded',function(){
  var cg = new html5jp.graph.circle("sample");
  if( ! cg ) { return; }
  var items = [
    ["Windows7", 215609],
    ["10", 133963],
    ["8.1", 34116],
    ["Vista", 10532],
    ["Xp", 7194],
    ["8", 2057],
    ["2000", 77],
    ["Server 2003", 51]
  ];
  var params = {
        backgroundColor: "#eeffee",
        shadow: false,
        captionNum: false,
        startAngle: -90,
        therCaption: "その他"
  };
  cg.draw(items,params);
},false);