phpの値をjavascriptに渡してグラフを表示

プログラミング

この記事では「phpの値をjavascriptに渡してグラフを表示する方法」を紹介します.

今回は,折れ線グラフを表示させてみたいと思います.

php

php

<?php
//phpでのデータ
$x = array("1日", "2日", "3日", "4日", "5日");
$y = array(1, 4, 9, 16, 25);
$z = array(1, 0.5, 3, 2, 11);
//javascriptに渡す
$jx = json_encode($x);
$jy = json_encode($y);
$jz = json_encode($z);
?>

json_encodeを使って,javascriptにx,y,zを渡しています.

javascript

グラフの表示には,『Chart.js』というものを使います.

javascript

<canvas id="myLineChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<script>
//phpから値を受け取る
let x = JSON.parse('<?php echo $jx; ?>');
let y = JSON.parse('<?php echo $jy; ?>');
let z = JSON.parse('<?php echo $jz; ?>');

//以下,グラフを表示
var ctx = document.getElementById("myLineChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: x,
      datasets: [
        {
          label: 'Yの値',
          data: y,
          borderColor: "rgba(255,0,0,1)",
          backgroundColor: "rgba(0,0,0,0)"
        },
        {
          label: 'Zの値',
          data: z,
          borderColor: "rgba(0,0,255,1)",
          backgroundColor: "rgba(0,0,0,0)"
        }
      ],
    },
    options: {
      title: {
        display: true,
        text: '何かのグラフ'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 40,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  'cm'
            }
          }
        }]
      },
    }
  });
  </script>

JSON.parseを使って,x,y,zを受け取っています.

結果は,以下のようになります.

折れ線グラフ以外のグラフを表示させたい場合は,以下の記事などをご覧下さい.

Chart.jsでグラフを描画してみた - Qiita
1. はじめに Chart.jsを使用すると、簡単に、綺麗なグラフを描画することができます。 公式ホームページ 今回は、特に使用頻度の高そうな、以下5種類グラフの描画方法を紹介...

ちなみに,このページ(WordPress)での表示にはInsert PHP Code Snippetというプラグインを用いました.

上に記述したコードをInsert PHP Code Snippetで作成して,WordPressの記事編集画面にショートコードを貼るだけです.

Insert PHP Code Snippet
記事編集画面(このページ)

コメント

タイトルとURLをコピーしました