phpで取得したデータをjavascriptでグラフ表示

###前提・実現したいこと
下記のようにDBに入っている場合、科目名と点数を該当の人達の科目名と点数を取得してきて、比較の棒グラフに表示させたいです。人によっては、やっていない科目があるので、その科目には'0'を入れたいです。また重複してる科目に関しては削除したいです。

DB
user 科目点数
田中国語 90
佐藤数学 81
山崎英語 79
田中数学 84
山崎理科 64
佐藤社会 75
佐藤英語 87

実現したい形
例田中くん佐藤くんのデータを取得した場合

二人の科目 [国語,数学,社会,英語]
田中 [90,84,0,0]
佐藤 [0,81,75,87]

のような形にしたいのですが、どのような方法でやったらいいのかわからず、ご教授いただきたいです。

###発生している問題・エラーメッセージ

下記の形になってしまい、0が入れることが出来ないため、詰まって表示されてしまいます。
グラフに表示する際、'国語'のグラフの部分に田中くんの国語の点数と比較として表示されるのは、佐藤くんの'数学'の点数が表示されてしまいます。

二人の科目 [国語,数学,社会,英語]
田中 [90,84]
佐藤 [81,75,87]

###該当のソースコード

PHP
1
2  $userdata = "";
3  $kamoku_label_value = "";
4  $user_name = array();
5  $user_kamoku = array();
6 
7    for($i = 0; $i < count($user); $i++){
8            $sql ="SELECT文が入ります";
9
10            $stmt = $pdo -> query($sql);
11            $stmt->execute();
12
13            $user_tensu = array();
14            $user_tensu_value = "";
15
16            $border_color = ['red','blue','green','yellow','rgba(75,192,192,0.4)','rgba(153,255,51,1)','rgba(255,153,0,1)','#34495e'];
17
18              while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
19
20
21                  if($deleted_at === NULL){
22                    $user_tensu[] = array('tensu' => $result['master_tensu']);
23                    $user_kamoku[] = array('kamoku' => $result['kamoku_name']);
24                    $user_name[] =  array('name' => $user_name);
25                  }
26                }
27
28                /*配列が空じゃないかチェック*/
29                if(isset($user_name[$i]['name'])){
30
31                  /* 名前の重複チェック */
32                    $name_tmp = $name_result = array();
33                    foreach($user_name as $num => $value){
34                        if(!in_array($value['name'], $name_tmp)){
35                          $name_tmp[] = $value['name'];
36                          $name_result[] = $value;
37                        }
38                    }
39
40
41                    /*'tensu'の連想配列を配列に chart.jsに入れる形にここでしています*/
42                    $user_tensu_array = array_column($user_tensu, 'tensu');
43                    foreach ($user_tensu_array as $val) {
44                      $user_tensu_value.= "".$val.",";
45                    }
46
47                    $userdata .= "{ label:'".$name_tmp[count($name_tmp) - 1]."',backgroundColor:'".$border_color[$i]."',data:[".$user_tensu_value."]},";
48
49                }
50              
51
52          }
53
54
55              /*スキル名の重複チェック*/
56             $kamoku_tmp = $kamoku_result = array();
57               foreach($user_kamoku as $num => $value){
58                  if(!in_array($value['kamoku'], $kamoku_tmp)){
59                      $kamoku_tmp[] = $value['kamoku'];
60                      $kamoku_result[] = $value;
61                  }
62               }
63
64            /*連想配列から配列に*/
65            $kamoku_name_array = array_column($kamoku_result, 'kamoku');
66            foreach ($kamoku_name_array as $val) {
67              $kamoku_label_value .= "'".$val."',";
68            }
69
70
71
72
73
74ヒアドキュメントでグラフを出力しています
75
76$view = <<<EOD
77
78<!DOCTYPE html>
79<html lang="ja">
80<head>
81<meta charset="UTF-8">
82<title>スキル管理</title>
83
84<script type = "text/javascript" src="../commons/js/jquery/jquery-3.2.1.min.js"></script>
85<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
86
87</head>
88
89<body>
90
91<script>
92var ctx = document.getElementById("myChart").getContext('2d');
93
94var myChart = new Chart(ctx, {
95  type: 'horizontalBar',
96  data: {
97    labels:[$kamoku_label_value],
98    datasets: [
99    $userdata
100    ]
101  },
102  options: {
103    scales: {
104        xAxes: [{
105            ticks: {
106                min:0,
107                max:150,
108                stepSize:10
109            }
110        }],
111        yAxes: [{
112
113        }]
114    },
115    title: {
116      display: true,
117      text: '点数'
118    },
119  }
120});
121</script>
122</body>
123
124
125</html>
126EOD;
127
128echo $view;
129
130

###補足情報(言語/FW/ツール等のバージョンなど)
グラフにはchart.jsを使用しています

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

回答1件

ベストアンサー

該当箇所は探していませんが、
田中 [90,84,0,0]
の初期値を
田中 [0,0,0,0]
とし、上書きしていけば良いです。

投稿2017/09/02 02:42

退会済みユーザー

総合スコア0

sakanakuuuuunn

2017/09/02 03:08

申し訳ありません、初期値を0にして、どのようにその科目の箇所にいれたらよいのでしょうか。。

退会済みユーザー

2017/09/02 10:42

コードの中身を確認するつもりはないですが、こういったケースは、入力と出力をどのようにすべきか想定してコーディングします。今回は、入力が DB からの読み取りで、テスト毎に分かれているので、それをユーザごとに整理することになりますが、その整理の直前で、ユーザデータを初期化してやれば良いです。せっかく DB にデータが入っているので、そもそも抽出するのは「田中」「佐藤」のデータのみとし、それを科目で整理するのが普通だと思います。・ユーザデータ初期化・ユーザ名で、DBから科目と点数を抽出・ユーザデータに、科目と点数をマッピングみたいな流れになるかと。データ構造が不明なので断言は出来ませんが、そもそもの設計が多分変です。もう一度やりたいことを整理して、フローを見直しましょう。

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