Category: ccchart 002 円(ドーナツ) 実験

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  002  円(ドーナツ) 実験 改

///////

///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata79 = {

  "config": {
    "title": "pie Chart",
    "subTitle": "円(ドーナツ)チャート",
    "type": "pie",
    "useVal": "yes",
    "pieDataIndex": 0,
    "colNameFont": "100 18px 'Arial'",
    "pieRingWidth": 80,
    "pieHoleRadius": 40,
    "textColor": "#888",
    "bg": "#fff"
  },

  "data": [
    ["Year",2007],
    ["Black tea",335],
    ["Coffee",400],
    ["Juice",160],
    ["Oolong",100]
  ]
};

ccchart.init('hoge', chartdata79);

</script>
/////// 

ccchart

http://ccchart.com

デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  002  円(ドーナツ) 実験

///////

/////// 
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata79 = {

  "config": {
    "title": "pie Chart",
    "subTitle": "円(ドーナツ)チャート",
    "type": "pie",
    "useVal": "yes",
    "pieDataIndex": 3,
    "colNameFont": "100 18px 'Arial'",
    "pieRingWidth": 80,
    "pieHoleRadius": 40,
    "textColor": "#888",
    "bg": "#fff"
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",335,352,527,448,775,835,979],
    ["コーヒー",400,385,436,373,357,688,800],
    ["ジュース",160,252,588,252,567,502,660],
    ["ウーロン",100,183,352,120,302,400,1112]
  ]
};

ccchart.init('hoge', chartdata79);

</script>
/////// 

↑このページのトップヘ