Obniz に canvas でチャートを描いてみる

昨日 Obnizが届いて、
https://qiita.com/toshirot/items/5bc1ac6884b0da395da0

さっき Obnizの canvasを forinしてみて使えそうに思えたので、
https://qiita.com/toshirot/items/b1f9dd61d2b134700c5f

Obniz に canvas でチャートを描いてみることにした。

ディスプレイサイズは 128x64で白黒なのでそれに合わせて調整する、凡例とかX軸Y軸も全部は無理かな。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">canvas<br>円を塗りつぶす。中間色#dddは無い。<br><br>ctx.fillStyle=‘<a href="https://twitter.com/hashtag/ddd?src=hash&amp;ref_src=twsrc%5Etfw">#ddd</a>’<br>ctx.arc(32,32,20,0,Math.PI*2)<br>ctx.fill() <a href="https://t.co/kBARh1WUdb">pic.twitter.com/kBARh1WUdb</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005822114107027457?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

うん、問題ない。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">チャートのX軸のつもりで10本lineを引いてみた。lineWidthは1だけどチャートのX軸としては太過ぎて使えない。 <a href="https://t.co/rNPaWWEQoK">pic.twitter.com/rNPaWWEQoK</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005831066584674304?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">X軸4本くらいならまあ、使えなくも無いけど、白黒128x64でチャートの描くのは無謀に思え始めてきた。 <a href="https://t.co/t2s9HQd0eZ">pic.twitter.com/t2s9HQd0eZ</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005832418840866817?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


そこですかさずプレッシャーがくる(^^;


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">そこは何かいいアイデアを出して乗り切る、みたいな…</p>&mdash; 古籏一浩 (@openspc) <a href="https://twitter.com/openspc/status/1005834166460563456?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">で、まあ、ラインチャート描いてみた。 <a href="https://t.co/yOSXzpOv1A">pic.twitter.com/yOSXzpOv1A</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005837814552920065?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">一色だと、ラインが重なった時にどっちの線かわからなくなるので、一本チャートしか無理かな。 <a href="https://t.co/Uyg7PjfRt8">https://t.co/Uyg7PjfRt8</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005838423301636096?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">これって、ccchartの凡例とかここでは使わない機能をそぎ落として、デフォルトサイズとか調整すれば、そのまま使えそうな気がしてきた。 <a href="https://t.co/Uyg7PjfRt8">https://t.co/Uyg7PjfRt8</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005843405555974148?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ccchartで描けた。 <a href="https://t.co/HF4IpvngqY">pic.twitter.com/HF4IpvngqY</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005843786193240064?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">てことは、リアルタイムチャートもかけるということだよね。ObnizはWebSocketなんだし。 <a href="https://t.co/4WetfDPgJX">https://t.co/4WetfDPgJX</a></p>&mdash; 高橋登史朗 ( T blockchain T ) (@toshirot) <a href="https://twitter.com/toshirot/status/1005844637993431040?ref_src=twsrc%5Etfw">2018年6月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


よし、明日ももう少しやってみる。

次はこれ。ccchartでチャートを描くコード
Obniz の ディスプレイに ccchart で描いてみる https://qiita.com/toshirot/items/ca8d4d3748ef55c4b912