ccchart 실시간 히트맵
참고로 저는 실시간 그래프 ccchart를 잘하는데 그 기본적인 사용 방법에 대한 해설은"여기 있습니다.
Giithub 여기 있습니다.「 WebSocket에서 ccchart로 유입 」
이번에 우리는 지난번 핫맵을 실시간으로 이동할 때의 클라이언트와 웹소켓 서버 측의 코드 샘플을 준비했다.
먼저 WebSocket을 통해 데이터를 받고 그래프를 그리는 클라이언트입니다.
html
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
var chartdata101 = {
"config": {
"title": "リアルタイム ヒートマップ",
"type": "heatmap",
"maxWsColLen":300, //表示するデータの件数
"outerCircle": 70, //円の大きさ
"bg": "#eee" //背景色
},
"data": [
["X"], //X位置
["Y"] //Y位置
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata101)
.ws('ws://ccchart.com:8024')
.on('message', ccchart.wscase.oneColAtATime)
</script>
이 시위는 이런 느낌이다.시시각각 열도를 그리다.toshirot/ccchart
서버의 경우 ws:/ccchart.com:8024에서 Websocket으로 데이터를 전송합니다.소스 여기 있습니다. 노드입니다.js로 이런 느낌을 썼어요.
Node.js
var WsServer = require('ws').Server;
var tid;
//WebSocketサーバーを立てる
var ws = new WsServer({
host: 'ccchart.com',
port: 8024
});
broadCast();//データ配信開始
//on connection 接続時の処理(省略可)
ws.on('connection', function(socket) {
//console.log('conned: ' + ws.clients.length);
//これはHeartbeatをする場合だけ(ccchart.jsが自動的にやってくれます)
socket.on('message', function(msg) {
var msg = JSON.stringify(msg);
if(msg === 'Heartbeat'){
socket.send(msg);
console.log(msg);
}
});
});
//データ配信処理
function broadCast(){
//console.log(ws.clients.length)
//300ミリ秒ごとに送出する
tid = setInterval (function(){
var dataAry = mkData();
ws.clients.forEach(function(client) {
if(client.readyState===1)
client.send(JSON.stringify(dataAry));//全クライアントへ送出する
});
}, 300);
}
//ランダムデータを作成
function mkData(){
var data = [
["X"],
["Y"]
];
data[0]=Math.floor(Math.random(10) * 96 );
data[1]=Math.floor(Math.random(10) * 20) + Math.floor(Math.random(10) * 50);
return data;
}
덤실시간 처리와는 무관하지만 config에 기술된 hmgrad라는 속성에 따라 색을 바꿀 수도 있습니다.
예를 들어 이런 따뜻한 색계도 괜찮다.
http://jsfiddle.net/UkdvS/593/
html
<script src="http://ccchart.com/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>
<script>
//暖色系の色合いのグラデーションを決めておく
var _GRADIENT={
0.1 : 'red',
0.3 : 'red',
0.6 : 'yellow',
1.0 : '#fff'
}
var chartdata102 = {
"config": {
"title": "リアルタイム ヒートマップ",
"type": "heatmap",
"maxWsColLen":100, //表示するデータの件数
"outerCircle": 80, //円の大きさ
"hm_grad": _GRADIENT,//色合い
"bg": "#eee" //背景色
},
"data": [
["X"], //X位置
["Y"] //Y位置
]
};
ccchart.wsCloseAll();//一旦クリア
ccchart
.init('hoge', chartdata102)
.ws('ws://ccchart.com:8024')
.on('message', ccchart.wscase.oneColAtATime)
</script>
이 소스의 프레젠테이션은 다음과 같습니다.참고로 http://jsfiddle.net/UkdvS/594/ 등을 보면 좀 더 상세할 수 있어요.
Reference
이 문제에 관하여(ccchart 실시간 히트맵), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/toshirot/items/6759502c759760d28420텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)