D3.jsは、JavaScriptを使用して折れ線グラフや棒グラフ、円グラフなど、データを可視化するツールとして知られています。
私が開発したアプリの折れ線グラフも、D3.jsを使用しています。

今回は、AngularJS + Onsen UIの構成で円グラフを表示する方法を紹介します。

テンプレート「Onsen UI V2 Angular 1 Minimum」を使用します。
D3.js公式サイトよりD3.zipをダウンロードします。

ダウンロードしたファイルを解凍して、d3.min.jsを[lib]フォルダにアップロードします。
下記コードをそのままコピー&ペーストして、実際に動かして確認した方が早いと思います。
あとはどこで何をやっているか理解すれば、アプリに流用できるかと思います。
なお、D3.jsの現在のバージョンはV5です。
古い関連書籍は古いバージョンなので注意してください。

iOS版のMonacaデバッガーで実行した結果です。

データビジュアライゼーションの教科書

新品価格
¥2,592から
(2019/5/28 15:00時点)

【Monaca】D3.jsを使用して円グラフを表示する
Tagged on: