質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.85%

  • PHP

    18634questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14782questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Laravel 5

    1611questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • JSON

    1014questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 170

hiroaki510

score 6

 実現したいこと

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

OS mac10.13
PHP7.1.14
laravel 5.6

 発生している問題

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

https://teratail.com/questions/94228

 該当のソースコード

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

  //$itemsは株価などのカラムがあるテーブルとユーザーのテーブルがリレーションされてます
  $js_ary = json_encode($items, JSON_UNESCAPED_UNICODE);
  echo $js_ary;
 //出力結果
[{"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"},
{"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"},
{"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"}]

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

補足事項・今できること

ログインしているユーザーに合わせて株価などの情報を表にして画面上に表すことは出来ています。

<table align="center">
          <tr>
            <th>銘柄名</th>
            <th>株価</th>
            <th>保有数</th>
            <th>平均取得単価</th>
            <th>評価額</th>
            <th>含み損益(%)</th>
          </tr>
          @foreach ($items as $item)
          <tr>
            <td>{{$item->company_name}}</td>
            <td>{{$item->stock_price}}</td>
            <td>{{$item->holding_number}}</td>
            <td>{{$item->average_price}}</td>
            <td>{{$item->stock_price * $item->holding_number}}</td>
            <td>{{floor($item->stock_price / $item->average_price * 100) - 100}}%</td>
          </tr>

          @endforeach
          </table>


出力結果
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/06/21 17:13

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

    キャンセル

  • hiroaki510

    2018/06/21 20:14

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

    キャンセル

  • hiroaki510

    2018/06/24 09:12

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

    キャンセル

回答 3

check解決した方法

+2

自己解決できました

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

var portfolio = <?php
    $portfolio = json_encode($items,JSON_UNESCAPED_UNICODE);
    echo $portfolio; ?>;

 var portfolioName = [];
 for (var i = 0; i < portfolio.length; i++) {
   portfolioName.push(portfolio[i].company_name);
 }

 var portfolioPrice = [];
 for (var i = 0; i < portfolio.length; i++) {
   portfolioPrice.push(portfolio[i].stock_price);
 }

 window.onload = function() {
    var ctx = document.getElementById("mychart").getContext("2d");
    var chart = new Chart(ctx, {
     type: 'doughnut',
     data: {
       labels:portfolioName,
       datasets:[{
         label:"ポートフォリオ",
         backgroundColor: 'rgb(255, 255, 255)',
         borderColor: 'rgb(255, 99, 132)',
         data:portfolioPrice,
       }]
     }

   });
 }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

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


view(blade)側

$chart->html()


だけ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 20:16

    リファレンスを読んでも、pieのグラフのやり方が分かりませんでした。(私の英語力が無いだけなのかもしれませんが…)
    また後日勉強します。ありがとうございました。

    キャンセル

  • 2018/06/24 09:14

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

    キャンセル

0

laravelでBladeをテンプレートエンジンに使用しているのであれば、下記の記述でJavascriptの変数に入るかと思います。

var js_ary= @json($js_ary);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 20:17

    ありがとうございます。また後日勉強してみます。

    キャンセル

  • 2018/06/24 09:14

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    配列をループで取り出したいPHP

    下記の配列をforeachで取り出したのですが、どのようなコードを書けばいいですか? $iの部分を0から順に取り出したいです。 <?php foreach ($price as

  • 受付中

    PHPの参照

    function func(&$num) { return $num; } $ex = 5; $go = func($ex); echo $go;

  • 解決済

    php 多次元配列の検索

    $arr[] = array('id'=>'1','name'=>'りんご','price'=>'98'); $arr[] = array('id'=>'2','name'=>'ば

  • 解決済

    フォームから複数のデータを送信する場合のnameのつけ方

    PHPで例えばショッピングカートの機能を持つフォームを作成するとして、複数の商品を登録する場合はフォームの要素名が重複することになります。 この場合、要素の名前を変える必要が

  • 解決済

    MYSQLの基本的なご質問

    現在Companyテーブルには id companyname  sales 1  A company 2  B company 3  C company 4  D com

  • 解決済

    GoogleChartのグラフの表示について。

    前提・実現したいこと 閲覧ありがとうございます。 現在GoogleChartを色々と動かしているのですが、まずは以下のサイトを参考にグラフ表示を行いました。 htt

  • 解決済

    INSERT...ON DUPLICATE の使い方

    コード <?php try { /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */ // データベースに接続 $pdo =

  • 解決済

    PHP/連想配列から値を取る方法

    PHP上に、以下のような配列があったとします。 Array ( [3] => Array( [0] => Array ( [id] => 1 [name] => あ [no]

同じタグがついた質問を見る

  • PHP

    18634questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    14782questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Laravel 5

    1611questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • JSON

    1014questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。