2014年09月

ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  011  (棒グラフ 縦 図) 実験
 
/////// 

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

  "config": {
    "title": "Bar Chart",
    "subTitle": "Canvasを使ったシンプルなチャートです",
    "type": "bar",
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",435,332,524,688,774,825,999],
    ["コーヒー",600,335,584,333,457,788,900],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
ccchart.init('hoge', chartdata1)
</script>
/////// 

ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  010  (シンプルな 折れ線の図) 実験

///////

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

  "config": {
    "title": "Line Chart",
    "subTitle": "Canvasを使ったシンプルなラインチャートです",
    "type": "line",
    "lineWidth": 4,
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",435,332,524,688,774,825,999],
    ["コーヒー",600,335,584,333,457,788,900],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
ccchart.init('hoge', chartdata2)
</script>
/////// 

ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  009  (Canvasを使ったベジェなライン図) 実験 くれよん

///////

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

  "config": {
    "title": "bezierLine Chart",
    "subTitle": "Canvasを使ったベジェなラインチャートです",
    "type": "bezi",
    "lineWidth": 12,
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",435,332,524,688,774,825,999],
    ["コーヒー",600,335,584,333,457,788,900],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
ccchart.init('hoge', chartdata3)
</script>
/////// 

ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  008  (積み上げ 縦 グラフ) 実験

/////// 

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

  "config": {
    "title": "stacked Chart",
    "subTitle": "Canvasを使った積み上げチャートです",
    "type": "stacked",
    "barWidth": 48,
    "colorSet": 
          ["red","#FF9114","#3CB000","#00A8A2","#0036C0","#C328FF","#FF34C0"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#687478",
            "to":"#222222"
          }
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",435,332,524,688,774,825,999],
    ["コーヒー",600,335,584,333,457,788,900],
    ["ジュース",60,435,456,352,567,678,1260],
    ["ウーロン",200,123,312,200,402,300,512]
  ]
};
ccchart.init('hoge', chartdata4)
</script>
/////// 

ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  006  (なめらか曲線 図) 実験 

///////

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

  "config": {
    "title": "Bezier Chart2",
    "subTitle": "Canvasを使った普通な感じのベジェラインチャートです",
    "type": "bezi2",
    "xScaleXOffset": 4,
    "colorSet": 
          ["#666","#aaa","#ccc"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#222",
            "to":"#687478"
          }
  },

  "data": [
    ["月",1,2,3,4,5,6,7,8,9,10,11,12],
    ["コーヒー",52,57,44,50,60,55,68,80,64,41,57,78],
    ["ジュース",30,45,56,40,80,68,76,90,75,52,57,55],
    ["ウーロン",20,23,12,20,42,50,72,63,30,20,32,50]
  ]
};
ccchart.init('hoge', chartdata6)
</script>
/////// 

↑このページのトップヘ