前提
laravelで登録フォームから登録した数字がグラフに表示されるシステムを作っています。
chart.jsを使ったグラフの下部の所にデータベースから登録した日付を入れられるようにしたいのですが、
jsファイルの中にデータベースの値を取得し表示することができていません。
laravelとPHPを使って初めてアプリを作っています。
実現したいこと
- [1 ] グラフにデータを登録した日付が表示されるようにする(日付はデータベースから取得する。created_atの月と日を入れるようにしたいです。)
現状は、chartjs.jsの該当部分は、曜日が表示されるようになっています。↓
データベースのカラム(created_atの月と日付を表示したいです。)
該当のソースコード
chartjs.js
1ソースコード 2import Chart from "chart.js/auto"; 3import axios from 'axios'; 4 5const ctx = document.getElementById("myChart").getContext("2d"); 6const myChart = new Chart(ctx, { 7 type: "line", 8 data: { 9 labels: ["月", "火曜", "水曜", "木曜", "金曜", "土曜", "日曜"], 10 datasets: [ 11 { 12 label: "体調", 13 //data: Graph, 14 borderColor: "rgb(75, 192, 192)", 15 backgroundColor: "rgba(75, 192, 192, 0.5)", 16 spanGaps: true, 17 }, 18 { 19 label: "睡眠時間", 20 //data: コントローラから取得, 21 borderColor: "rgb(153, 102, 255)", 22 backgroundColor: "rgba(153, 102, 255, 0.5)", 23 spanGaps: true, 24 }, 25 { 26 label: "ストレス度", 27 //data: コントローラから取得, 28 borderColor: "rgb(255, 127, 80)", 29 backgroundColor: "rgba(153, 102, 255, 0.5)", 30 spanGaps: true, 31 }, 32 33 34 35 ], 36 }, 37}); 38 39// Laravelのチャートデータ取得処理の呼び出し 40axios 41 .get("/chart-get") 42 .then((response) => { 43 // Chartの更新 44 myChart.data.datasets[0].data = response.data; 45 myChart.update(); 46 }) 47 .catch(() => { 48 alert("失敗しました"); 49 });
ChartController.php
1 2<?php 3 4namespace App\Http\Controllers; 5 6use Illuminate\Http\Request; 7use App\Models\RecordCondition; 8use Illuminate\Support\Facades\DB; 9 10 11 12class ChartController extends Controller 13{ 14 /** 15 * チャートデータを取得 16 */ 17 public function chartGet() 18 { 19 // データベースからデータ取得 20 $Graphs = DB::table('record_conditions')->get(); 21 22 foreach($Graphs as $Graph) { 23 echo $Graph->feeling . "<br>"; 24 25 26 } 27 28 29 30 } 31 32 33 34} 35
試したこと
1.こちらに記載のURLを参考にchart.jsを実装しました。
【Laravel】Chart.jsの導入と実装
https://chigusa-web.com/blog/laravel-chart-js/
2.chart.jsのlabels:内に {{$created_at}}と入れてみましたが、
グラフ自体が表示されなくなりました。
3.こちらも参考になるかと思い試してみましたが、私の理解が出来ていないせいか、うまくできませんでした。
https://qiita.com/m1527092/questions/2b9501543b7ab4aa30a0
補足情報(FW/ツールのバージョンなど)
バージョン laravel9
グラフ chart.js

あなたの回答
tips
プレビュー