配列の内容を折れ線グラフとして表示する（PHP+JavaScript）

配列の内容を折れ線グラフとして表示する（PHP+JavaScript）

chart.js を利用したグラフ表示

今回は「chart.js」というライブラリを利用します。
Chart.jsは簡単に使えます。
Chart.jsを使うのに必要なものは2つだけ。
以下の２つをhtml部分に記載。

Chart.jsのインストール

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

canvas要素：Chart.jsがHTML5のcanvas要素内にグラフを記載するため

<canvas id="myChart"></canvas>

基本的なグラフ表示の方法

最小限の折れ線グラフをChart.jsで作るのに必要なものはこれだけ。
htmlのの中のどこかで、上記の２つと次のコードを記述するだけでグラフが表示されます。

<canvas id="myChart"></canvas>
<!-- グラフ用のchart.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',//線の種類
        data: {
            labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],//横軸のラベル
            datasets: [{
                label: あなたの体重,
                lineTension: 0, //グラフの曲がり度合い(デフォルトは0.5)
                fill: false, //グラフの線より下側を塗りつぶさないようにする
                data: [12, 19, 3, 17, 6, 3, 7],　　//縦軸の値
                borderColor: "#0066FF", //線の色
                backgroundColor: "#0066FF" //塗りつぶしの色
            }]
        },
        options: {
            title: {
                display: true, //タイトルの表示可否
                text: 'あなたの体重推移' //タイトル
            },
            scales: {
                yAxes: [{//縦軸のスケールを指定
                    ticks: {
                        suggestedMax: 75,//縦軸の最大値
                        suggestedMin: 65,//縦軸の最小値（最小値以下の値があれば自動で変更）
                        stepSize: 10,//縦軸の間隔
                        callback: function(value, index, values) {
                            return value + 'kg'
                        }
                    }
                }]
            },
        }
    });
</script>

グラフの表示結果

配列のグラフ表示の方法

せっかくなので横軸やグラフ表示する値が決まったものではなく、何かしらの配列の情報を用いてグラフ表示したいと思います。
横軸に$periodという変数、グラフ表示する値に$periodをキーとした連想配列$period_dailyWeightを用いています。

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [
    <?php
    $i=0;
    for($i = 0; $i < count($period); $i++){
      echo " ' ".$period[$i]." ' ".",";
    }
      ?>
    ],
    datasets: [{
      label: あなたの体重,
      lineTension: 0, //グラフの曲がり度合い(デフォルトは0.5)
      fill: false,    //グラフの線より下側を塗りつぶさないようにする
      data: [
        <?php
        $i=0;
        for($i = 0; $i < count($period); $i++){
          echo $period_dailyWeight[$period[$i]].",";
        }
          ?>
        ],
      borderColor: "#0066FF",//線の色
      backgroundColor: "#0066FF"//塗りつぶしの色
    }]
  },
  options: {
    title: {
      display: true,//タイトルの表示可否
      text: 'あなたの体重推移'//タイトル
    },
    scales: {
      yAxes: [{
        ticks: {
          suggestedMax: 75,
          suggestedMin: 65,
          stepSize: 10,
          callback: function(value, index, values){
          return  value +  'kg'
          }
        }
      }]
    },
  }
});
</script>

記述のポイント

変わった部分は横軸labelsとグラフ表示する値dataの部分となります。

***①PHPでif文を回す

「基本的なグラフ表示の方法」と同じような記載方法になるように、PHPでif文を回して、echo文で配列の中身を順番に呼び出しています。

***②「 , 」や「 ' 」を結合

「基本的なグラフ表示の方法」と同じような記載方法になるように、「 , 」や「 ' 」を結合しています。
「変数(文字列).変数(文字列)」で変数同士を結合できます。

***③「 , 」や「 ' 」を、「"」で囲う

「 , 」や「 ' 」は文字列なので、「"」でそれぞれ囲んでおります。