
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
HTMLということはWebサイト上でリアルタイムに表示したいということと解釈しました。
>CSV形式で5分ごとに保存しています。
とのことですので、csvデータの更新の仕組みはできているものとします。
大雑把に考えると、HTML側からは
・定期的(5分程度間隔で)にデータを読みに行き
・その内容をグラフに反映する
機能が必要になります。
これらを実現するのには何らかのプログラムが必要になりますので、HTMLだけでは無理ですがjavascriptなどを利用することで実現できると思います。
そのままぴったりのものはないかも知れませんが、似たような機能をサポートするライブラリは数多く作成されていますので、それらを利用することで比較的実現しやすくなるとはいえるでしょう。
データをグラフ化するには、canvasやSVGを利用して表示している例が多いと思いますが、その際の補助をしてくれるライブラリはたくさんあります。
表示したい内容によっては向き不向きがあるかも知れませんが、以下、ご参考までに。
http://tokkono.cute.coocan.jp/blog/slow/index.ph …
http://www.fwoabw.info/entry/2013/09/24/008062
もう一方で、データを定期的に読みに行くことも必要ですが、技術的にはajaxという手法(=サーバと通信する方法の一つ)を利用することで可能です。
ajax用のライブラリもいろいろ作成されてはいますが、それぞれを別個に利用するよりも。グラフ用のライブラリの中でajaxもサポートしているものを利用するのが簡単だと思います。
一例として、データ可視化を目的とした、D3.jsの例を。
以下の例では、CSVを読み込んで、様々な見せ方をしています。
https://bl.ocks.org/mbostock/1256572
D3の本家のサイト
https://d3js.org/
大雑把な方法としてはこんな感じだと思いますが、
>やり方がわかりません。
というご質問のレベルから考えると、相当にハードルが高いかも知れません。
この回答へのお礼
お礼日時:2017/11/28 11:10
詳しい回答ありがとうございます。
Googlechartでグラフ表示まではできますが
動くグラフを書きたかったので、今回質問させて頂きました。
いろいろな方法があり、何が最適か分からず途方にくれてましたが、
上記のものを一通りやってみます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
ホームページのサイトでhtm...
-
レスポンシブで困っています・・
-
HTML/CSSを使って写真のような...
-
HTMLでクロス抽出したい
-
ホームページの制作について教...
-
GoogleSearchControlにホームペ...
-
テーブルの行を折りたたみたい...
-
テーブルのセルデータを自動改...
-
ボックスを中央配置したいです。
-
スマホでHTMLファイルを開いて...
-
、URL化させるにはどうしたらい...
-
CSS初心者です。わかる方教えて...
-
HTMLで特定の文字だけ色を変え...
-
角丸画像の背景色を透明にした...
-
iPhoneで HTMLファイルを閲覧
-
CSSで謎の現象
-
完全素人がノーコードWEB制作の...
-
htmlの<input type=”file”>でア...
-
メディアクエリについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
データ受け渡しについて
-
ajaxでhtmlを返して画面に描画…...
-
ローカルネットワーク内での502...
-
jQueryの$.postの戻り値による...
-
googleマップにajax
-
CGI→AJAXへ配列の受け渡しは可...
-
AjaxでDBと連携した動的リスト...
-
Response.Write(変数)
-
【Ajax】改行を含めたデータを...
-
HTMLでリアルタイムグラフを作...
-
カウントダウンを表示
-
JavaScriptだけで画像アップロ...
-
ajaxによるcsvデータの絞り込み...
-
チャットを作る
-
大量のデータを表として展開す...
-
python pandas ビックデータ解...
-
カーソルの動きに合わせてDBか...
-
innerHTMLで表示完了後に、Ajax...
-
ジャンクの箇所を一切書かずに...
-
【JavaScript】confirmのボタン...
おすすめ情報