ccchart

http://ccchart.com

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


ということで、当面は「ccchart」で遊ぶ。
///////
ccchart  001  (散布図) 実験

/////// 

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

  "config": {
    "title": "scatter Chart",
    "titleColor": "#ccc",
    "subTitle": "散布図",
    "subTitleColor": "#ccc",
    "type": "scatter",
    "useMarker": "maru",
    "xLines": "none",
    "xScaleSkip": 0,
    "maxWsColLen": 120,
    "shadows": {"hanrei":["#333",5,5,5]},
    "colorSet": 
          ["rgba(153,153,255,0.8)","rgba(255,204,102,0.8)","rgba(250,50,0,0.8)"],
    "bgGradient": {
            "direction":"vertical",
            "from":"#111",
            "to":"#798589"
          }
  },

  "data": [
    ["時間","test-1","test-1","test-0","test-1","test-1","test-2","test-0","test-2","test-2","test-0","test-1","test-0","test-1","test-1","test-2","test-1","test-0","test-1","test-1","test-0","test-1","test-0","test-1","test-0","test-0","test-1","test-0","test-1","test-0","test-0","test-2","test-1","test-2","test-0","test-2","test-2","test-0","test-1","test-0","test-2","test-2","test-2","test-0","test-2","test-2","test-2","test-0","test-2","test-0","test-2","test-1","test-2","test-0","test-1","test-0","test-0","test-2","test-2","test-1","test-2","test-1","test-2","test-1","test-2","test-2","test-2","test-2","test-1","test-2","test-2","test-1","test-0","test-0","test-2","test-0","test-2","test-0","test-0","test-2","test-1","test-1","test-0","test-0","test-1","test-2","test-2","test-0","test-2","test-1","test-0","test-2","test-1","test-2","test-1","test-0","test-1","test-2","test-0","test-1","test-2","test-1","test-1","test-0","test-0","test-0","test-2","test-1","test-0","test-2","test-1","test-2","test-2","test-0","test-1","test-0","test-0","test-0","test-2","test-2","test-0"],
    ["s2",51,71,51,90,20,30,42,65,93,18,17,47,3,7,57,55,77,26,74,75,77,71,88,67,20,53,22,14,24,33,82,18,92,73,35,26,27,70,10,62,37,11,77,15,63,55,18,33,87,24,66,65,51,23,18,7,70,66,73,25,11,28,79,41,9,48,59,31,65,62,0,16,69,31,38,30,22,19,80,81,77,45,28,55,85,75,62,27,25,95,68,80,46,58,56,93,62,83,30,79,64,13,34,89,69,75,72,75,90,22,41,71,44,21,60,48,72,8,84,17],
    ["s3",46,65,34,57,49,25,23,45,4,10,20,51,57,29,34,48,55,27,20,17,36,44,20,23,38,44,27,2,11,52,51,22,21,60,41,34,52,57,45,39,40,17,40,20,9,49,22,59,4,48,30,55,29,14,58,39,47,5,32,38,3,56,22,7,8,21,45,24,43,28,17,53,43,24,47,19,15,46,15,29,30,41,32,20,49,19,42,4,28,11,15,42,26,38,52,65,52,24,45,50,24,45,34,15,61,31,33,61,13,40,29,44,33,60,27,44,44,12,9,35]
  ]
};

ccchart.init('hoge', chartdata91);

</script>

//////