ざっくりとした質問で大変申し訳ありません。
参考にできるサイトやアドバイスをいただければ幸いです。
やりたいこと
express、chart.jsを使って温度グラフを表示するwebアプリを作ろうとしています。
目標はiPhoneのヘルスケアアプリのようなものです。
- 最初アクセスすると、最新の日にちの温度グラフが表示されます。
- 「←」の矢印を押すと、前の日のグラフが表示されます。
- 「→」の矢印を押すと、次の日のグラフが表示されます。
- 表示方法を「日」「月」「年」ごとなども選んで、表示を変更したいです。
現状
いまのところ、localhost:3000/selectにアクセスして、
最新の日にちの温度グラフを表示するところができていますが、
前の日や次の日への変更、年月日の表示方法の変更など、
どのような動きをさせて、どのように値を渡せばいいのか検討がつきません。
localhost:3000/select
で最新グラフが表示されるようになっているのですが、
localhost:3000/select?page=20211113
localhost:3000/select?page=20211114
localhost:3000/select?page=202109
のように値を渡しながらページを変更していければいいのかなと考えています。
値の渡し方、ページの表示の仕方などで、
参考にできるサイトやアドバイス、ヒントなどあれば教えていただきたいです。
よろしくお願いします。
app.js(/selectの部分を抜粋)
最新の日付を取得し、その日付の温度グラフを表示できます
javascript
1app.get('/select', async (req, res) => { 2 try{ 3 const c = await connection; 4 //データ内の最新の日付を持ってくる 5 const [now] = await c.query( 6 'SELECT DATE_FORMAT(date, \'%Y%m%d\') AS latestDate FROM data where date=(select max(date) from data);', 7 ); 8 const latestDate = now[0].latestDate; 9 //最新日付を持つデータを全て持ってくる 10 const [items] = await c.query( 11 'SELECT date, temperature FROM data and DATE_FORMAT(date, \'%Y%m%d\') = \"' + latestDate + '\"ORDER BY date ASC;', 12 ); 13 14 //最新のデータを取得して表示する 15 const [latests] = await c.query( 16 'SELECT * FROM data where date=(select max(date) from data);', 17 ); 18 res.render('index.ejs', {items, latests}); 19 }catch (e) { 20 console.log("SQLクエリの発行に失敗"); 21 console.error(e); 22 res.send('サーバーでの動作が失敗。'); 23 }finally { 24 } 25 26});
index.ejs(<script>を抜粋)
Javascript
1 2function testButton(){ 3 console.log("ボタンをおした"); 4 console.log(window.location.search); 5 const params = new URLSearchParams(window.location.search); 6 const currentPage = Number(params.get('page')); 7 const nextPage = currentPage + 1; 8 window.location.href = "/select?page=" + nextPage;
↑これで、ボタンを押すと、page=1の値がインクリメントされていくのがわかりました。
あなたの回答
tips
プレビュー