昨日
Obniz に canvas でチャートを描いてみる
https://qiita.com/toshirot/items/fe596aeb12e9a78ba408
でObniz の ディスプレイに ccchart でチャートを描けることがわかったので、
ccchartで描けた。 pic.twitter.com/HF4IpvngqY
— 高橋登史朗 ( T blockchain T ) (@toshirot) 2018年6月10日
そのコードサンプル。
barタイプのチャートをタイトルや値を省略してチャートだけ表示する「onlyChart」モードで描いてみる。
結果は、"barWidth": 5 にしたので少しbarが細くなってこんな感じ。
https://t.co/NIAedSx6LU
— 高橋登史朗 ( T blockchain T ) (@toshirot) 2018年6月11日
こうなります。 pic.twitter.com/8tGLNStqs4
ccchart.js を全く変更せずに config 値を変えるだけで Obniz に描画できました。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
<script src="https://ccchart.org/js/ccchart.js" charset="utf-8"></script>
</head>
<body>
<h1>obniz ccchart</h1>
<canvas id=hoge></canvas>
<script>
let chartdata = {
"config": {
"type": "bar",
"onlyChart": "yes",
"barWidth": 5,
//Canvas size
"width": 128,
"height": 64,
//Axis X
"axisXLen": 2,
"axisXWidth": 1,
"xColor":"#fff",
//Axis Y
"axisYLen":0,
//Bar color
"colorSet": ["#fff"],
//attributes not used
"useShadow":"no",
},
"data": [
["month",1,2,3,4,5,6,7,8,9,10,11,12],
["test",20,23,12,20,42,50,72,63,30,20,32,50]
]
}
// const canvas = document.getElementById("hoge")
// const ctx = canvas.getContext('2d');
const obniz = new Obniz("OBNIZ_ID_HERE");
//connect
obniz.onconnect = async function () {
let a=ccchart.init('hoge',chartdata)
obniz.display.draw(a.ctx);
}
</script>
</body>
</html>
typeをbar barWidthをlineWidthに変えるだけでこうなります。 pic.twitter.com/HAfqbxSVzD
— 高橋登史朗 ( T blockchain T ) (@toshirot) 2018年6月11日
pieも2値の片方だけなら白で描ける。値が3個以上は白黒だから無理。 pic.twitter.com/Rv2pMNu4Sp
— 高橋登史朗 ( T blockchain T ) (@toshirot) 2018年6月11日
コードはこんな感じ
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/obniz@1.4.3/obniz.js" crossorigin="anonymous"></script>
<script src="https://ccchart.org/js/ccchart.js" charset="utf-8"></script>
</head>
<body>
<h1>obniz ccchart</h1>
<canvas id=hoge></canvas>
<script>
let chartdata = {
"config": {
"type": "pie",
"onlyChart": "yes",
//Canvas size
"width": 128,
"height": 64,
//Bar color
"colorSet": ["#fff"],
//attributes not used
"useShadow":"no",
//attributes
"useVal": "yes",
"percentVal":"no",
"pieDataIndex": 0,//データとして使う列index
"pieHoleRadius": 12,//ドーナツ穴の半径
"colNameFont": "100 14px 'Arial'",//ドーナツの中の項目名フォント (month)
"valFont": "100 18px 'Arial'",//値のフォント
"textColor": "#fff"
},
"data": [
["month",1,2,3,4,5,6,7,8,9,10,11,12],
["abc",80,23,12,20,42,50,72,63,30,20,32,50],
["def",20,33,15,10,52,60,32,68,45,10,12,60],
]
}
// const canvas = document.getElementById("hoge")
// const ctx = canvas.getContext('2d');
const obniz = new Obniz("OBNIZ_ID_HERE");
//connect
obniz.onconnect = async function () {
let a=ccchart.init('hoge',chartdata)
obniz.display.draw(a.ctx);
}
</script>
</body>
</html>
で、次はこれ
ccchart-v1.12.090にObniz のリアルタイムチャート描画を暫定実装してみた https://qiita.com/toshirot/items/01afe0352aac9bbb6797