20241129 グラフを描こう

グラフを描こう 2024.11.29 関西モバイルアプリ研究会A #6 itok@そらかぜ

itok@そらかぜ • いとうけい（itok） • の中の人 • モバイルアプリエンジニア 兼 CEO • 副業でフリーランス的 • https://itok.jp/, https://sorakaze.co.jp/, @itokjp

• http://itok.jp/

所在地：京都市中京区 社員1人=自分

実績 自社 受託 公私合わせて200件以上のアプリ開発に携わる

iOS / Android / macOS / Windows / サーバ 一人でやってます（デザイン以外）

AI + 天気予報 「そらコーデ」公開！！

関西圏のJR車内で広告でてます

グラフを自分で描こう 📈📉📊 ライブラリ使いません

アプリで使われる いろんなグラフ

変わり種 時系列でデータをプロット

棒グラフ 画面におさまる シンプルなものなら ループで一気に描画 for data in list { drawBar(data) }

棒グラフ 画面におさまらなかったら・・・

棒グラフ スクロールするなら ListView TableView CollectionView リスト的なUIを使って 動的に都度描画 cell cell cell

折れ線グラフ

折れ線グラフ 打点で分割するなら 区切り目要注意

折れ線グラフ 打点付近に描画があると 96 分割できない 53 26 20 17 10 25

折れ線グラフ 前後の点の情報を使って 打点を分割の 中心に配置する

折れ線グラフ (x2, y2) 一次関数あるいは相似の計算 (x1, y1) (x01, y01) (x0, y0) (x12, y12)

折れ線グラフ 等間隔でデータが並んでいるとは限らない データ欠損があるかもしれない

折れ線グラフ 柔軟にするために分割の幅を変える 例えば画面の横幅単位にするなど

応用 データ列から短冊状の画像を 生成 & キャッシュして順番に描画 順次描画することで見た目のパフォーマンスも向上

まとめ • 自分で描いたほうが要件にあったグラフを作れるこ とも • こんなノウハウあるよとかあれば懇親会で是非