ccchart
http://ccchart.com
デモ・日本語ドキュメントがそろっている。特にデモの数が、非常に細かいレベルで揃っていてありがたい。
まだ実装はしてないけど、オプションも多いし、サンプルも多いし一番とっつきやすく、かつ色々なことが出来そう。
ということで、当面は「ccchart」で遊ぶ。
///////
ccchart 003 (積み上げる面(Area)図) 実験 (動くかな?)
///////
///////
///////
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata88 = {
"config": {
"title": "WebSocket stackedPercent Chart",
"subTitle": "列データをリアルタイム受信描画 受信パターンはoneColAtATime",
"type": "stacked%",
"bg": "orange",
"textColor": "#000",
"valColor": ["rgba(255,200,200,0.9)","rgba(255,0,255,0.9)","rgba(255,255,0,1)"],
"colorSet":
["rgba(255,0,0,0.7)","rgba(255,0,255,0.6)","rgba(255,255,0,1)"],
"useMarker": "arc",
"useVal": "yes"
},
"data": [
["Time"],
["紅茶"],
["コーヒー"],
["ジュース"]
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata88,
function () {
this
.ws('ws://ccchart.com:8018')
.on('message', ccchart.wscase.oneColAtATime)
}
);
</script>
///////