【Laravel】Chart.jsを使ってグラフを作成したい

実現したいこと

株のポートフォリオを管理できるwebアプリを作っているのですが、Chart.jsを使ってドーナツ型のグラフを作成したいです。

OS mac10.13
PHP7.1.14
laravel 5.6

発生している問題

他の質問者さんの投稿を見ると、JSON形式というものにすれば良さそうなのは理解できたのですが、自分が欲しいデータの取り方が分かりません。
（欲しいデータというのは、株価と企業名です。）

該当のソースコード

一応、viewにあるファイルの記述と、その出力結果を載せます。

php
1  //$itemsは株価などのカラムがあるテーブルとユーザーのテーブルがリレーションされてます
2  $js_ary = json_encode($items, JSON_UNESCAPED_UNICODE);
3  echo $js_ary;
4　//出力結果
5[{"id":4,"user_id":"1","company_name":"NTT","stock_price":"2800","holding_number":"100","average_price":"2500","created_at":"2018-06-19 03:43:03","updated_at":"2018-06-19 03:43:03"},
6{"id":8,"user_id":"1","company_name":"グッドコムアセット","stock_price":"1890","holding_number":"100","average_price":"1000","created_at":"2018-06-19 11:56:47","updated_at":"2018-06-19 11:56:47"},
7{"id":12,"user_id":"1","company_name":"KDDI","stock_price":"3012","holding_number":"200","average_price":"2780","created_at":"2018-06-19 12:27:34","updated_at":"2018-06-19 12:27:34"}]

私は全くの初心者なので、もっとこういう勉強をした方が良い、このサイトや本を見た方が良い、
などのヒントでも全然問題ないので教えてください。

###補足事項・今できること
ログインしているユーザーに合わせて株価などの情報を表にして画面上に表すことは出来ています。

php
1<table align="center">
2          <tr>
3            <th>銘柄名</th>
4            <th>株価</th>
5            <th>保有数</th>
6            <th>平均取得単価</th>
7            <th>評価額</th>
8            <th>含み損益(%)</th>
9          </tr>
10          @foreach ($items as $item)
11          <tr>
12            <td>{{$item->company_name}}</td>
13            <td>{{$item->stock_price}}</td>
14            <td>{{$item->holding_number}}</td>
15            <td>{{$item->average_price}}</td>
16            <td>{{$item->stock_price * $item->holding_number}}</td>
17            <td>{{floor($item->stock_price / $item->average_price * 100) - 100}}%</td>
18          </tr>
19
20          @endforeach
21          </table>

出力結果

m.ts10806

2018/06/21 07:21

Laravel関係なしに静的HTML上で想定のグラフが作れるか試してみられましたか？

hiroaki510

2018/06/21 07:28

データを手入力すればChart.jsで想定のグラフを作成出来ましたが、データベースとの接続？の方法がインターネットで検索しても分かりませんでした。

m.ts10806

2018/06/21 07:30

では$itemsはどのように取得されているのでしょうか。LaravelからDB接続して取得してきたデータではないのですか？

hiroaki510

2018/06/21 07:36

$itemsはコントローラーで$items = Stock::where('user_id',$request->user()->id)->get();と記述して取得しています。ここからどうChart.jsに渡す？のかが分からないです。

m.ts10806

2018/06/21 07:49

おそらく表現の問題ですね。実際は「データベースとの接続」もできていて、「データベースから取得した情報をViewに渡す」こともできている。現在できていないのは「取得したデータをChart.jsで使える形（JavaScriptとして出力するために）に整形する」というところですね。

hiroaki510

2018/06/21 07:58

そう書くべきでしたか、分かりにくくてすみません(^_^;)そうすると、取得したデータをChart.jsで使える形に整形する方法を調べれば良いということで間違いないですか？もしそうだとすれば、JSON以外に何か知るべきものはありますか？

m.ts10806

2018/06/21 08:13

そうです。参考にした質問の回答にあるのも「JavaScriptに問題のない形で出力する」ことがメインです。このような感じですね→　var hoge = <?php echo "[1,2,3,4]";?>;　つまり、Chart.jsが読み込める形に整形できればOKです。配列なのであればforeachなりforなりで必要な情報を取り出しつつ、JavaScriptの配列として文字列出力できるように整形していく形です。

hiroaki510

2018/06/21 11:14

ありがとうございます。今日はもう勉強出来そうに無いので、グラフ作成が出来るかどうかの報告はまた後日となりそうです。

hiroaki510

2018/06/24 00:12

自己解決できました。回答ありがとうございました。

行動規範の内容に同意します

回答3件

自己解決

##自己解決できました
まず、株価などのカラムがあるテーブルとユーザーのテーブルがリレーションされている$itemsをjson_encodeしました。
次に、企業名と株価の配列を作り、そこにfor文で値を格納していきました。
その配列をchart.jsのlabelsとdatasets[{data:}]に入れ込んで、見事自動的にグラフが生成されました。
色が全て同じになってしまうので、今後は自動的にいろを割り振っていきたいです。
実際のコード↓

JS
1var portfolio = <?php
2    $portfolio = json_encode($items,JSON_UNESCAPED_UNICODE);
3    echo $portfolio; ?>;
4
5 var portfolioName = [];
6 for (var i = 0; i < portfolio.length; i++) {
7   portfolioName.push(portfolio[i].company_name);
8 }
9
10 var portfolioPrice = [];
11 for (var i = 0; i < portfolio.length; i++) {
12   portfolioPrice.push(portfolio[i].stock_price);
13 }
14
15 window.onload = function() {
16    var ctx = document.getElementById("mychart").getContext("2d");
17    var chart = new Chart(ctx, {
18     type: 'doughnut',
19     data: {
20       labels:portfolioName,
21       datasets:[{
22         label:"ポートフォリオ",
23         backgroundColor: 'rgb(255, 255, 255)',
24         borderColor: 'rgb(255, 99, 132)',
25         data:portfolioPrice,
26       }]
27     }
28
29   });
30 }

投稿2018/06/24 00:11

hiroaki510

総合スコア16

別の角度からの回答です。
consoletvs/chartsを使うと、凄く簡単に色んなチャートが書けますよ。
こちらから

使用例(ごめんなさい、こちらはver5.*です。最新は6なのでリファレンスを読んでみてください)
Controller

php
1$chart = Charts::create('pie', 'google')->title('グラフタイトル')->labels(['項目A', '項目B', '項目C', '項目D'])
2->values([$valA,$valB,$valC,$valD])->dimensions(0, 200);