20241129 グラフを描こう

496 Views

November 29, 24

スライド概要

profile-image

いとーけー@そらかぜ

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

折れ線グラフ

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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