WebView内で折れ線グラフと円チャートを表示しています。SDKで実装すると、今後iPhoneのSDKでも独自に実装しなくてはいけません。そこで、Webページで折れ線グラフと円チャートを表示するようにすればAndroid/iPhoneともにWebViewを通して同じものが表示できるということで、Webページで実装しました。↓折れ線グラフ↓円チャート実装したときの手順を備忘メモ。jQueryの参照先を探す必須となるjQuery。これを使うには、まずはライブラリを持ってくる必要があります。Network)に用意しているファイルを読み込んで使います。自サイトの負荷を減らしたいので......。Visualizeをダウンロードしてnginxに置くこちらはCDNを見つけられなかったので、ダウンロードしました。静的ファイルなので、nginx側に置いてコーディング時に参照します。ディレクトリをダウンロード→下記のnginx内にアップロードnginx側の置き場所:/usr/share/nginx/html/これで準備が整いました。node.jsを使ってみる(さくらVPS編)」をもとに、コーディングを始めます。折れ線グラフと円チャートを実現させるにあたり、参考にしたサイトは↓です。折れ線グラフと円チャート■共通部分<head>のコーディングまずは、(3-1)(3-2)共通の<head>タグ。1ファイルに記述しています。「visualize.jQuery.js」をnginxから参照しています。Visualizeを使っている箇所です。「type:"area"」が折れ線グラフ(塗り潰し)、「type:"pie"」が円チャートです。しているのは、元となる表を表示したくないために隠しています。name="viewport"」は解像度をスマホの画面に合わせるためのパラメータ設定です。これがないとPCと同じ表示になってしまって、折れ線グラフと円チャートが小さく表示されてしまいます。コーディング(折れ線グラフ)折れ線グラフの元となる<table>タグの記述は↓のとおりです。Visualizeで参照するために「class="line"」としています。コーディング(円チャート)円チャートの元となる<table>タグの記述は↓のとおりです。Visualizeで参照するために「class="pie"」としています。(3-1)(3-2)ともに、各数値はMySQLから引っ張ってきています。掲載したので割愛します。これで折れ線グラフと円チャートが実現できました。便利なライブラリでした。[必須入力]このブログについてものづくりに関することを色々と。ウィジェット過去ログ2019年07月(1)2019年02月(3)2018年12月(1)2018年04月(1)2018年03月(1)2018年02月(1)2017年11月(3)2017年04月(4)2017年03月(7)2017年02月(1)2016年11月(1)2016年09月(1)2016年08月(3)2016年07月(1)2016年05月(1)2016年04月(1)2016年02月(4)2016年01月(1)2015年11月(1)2015年06月(1)検索ボックス。