閑古鳥

オールドプログラマの日記。プログラミングとか病気(透析)の話とか。

PHPでChart.js

Web API的なアレで、DBから取ってきたデータをChart.jsで描画しようと思ったのだけどJSON書いてるとなんか混乱してきたので、APIが返すJSONをそのままChart.jsの形式にしてしまった。あんまり良くない気もするけど、どうなんだろなぁ。

最初C#で書いていたのだけど色々あってPHPASP.NETはまったく触ったことなかったのだけれど、ほとんどコードを書かずに済むのでこっちも楽そうです。

こういうクラスを作ってから

 // sample.php
<?php
 $chart = new Chart("bar");
 $chart->data->labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 $ds = new DataSet();
 for ($i = 0; $i < 12; $i++) $ds->data[] = rand(0, 100);
 $chart->data->addDataSet($ds);
 echo json_encode($chart);
?>

こんなページを作って

 <!DOCTYPE html>
 <html>
 <head>
     <script src="Chart.bundle.min.js"></script>
     <script>
        window.onload = function() {
            // $.getJSON('sample.php') ...
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'sample.php', true);
            xhr.responseType = 'json';
            xhr.onload = function(e) {
                var ctx = document.getElementById('canvas').getContext('2d');
                new Chart(ctx, xhr.response);
            }
            xhr.send();
        }
    </script>
 </head> 
 <body>
     <canvas width="500" height="500" class="chartjs-render-monitor" id="canvas"></canvas>
 </body> 
 </html>

というような感じでそのまま突っ込むとチャートが出てきます。

Chart.jsはコールバック関数を設定することもできますが、PHPJSONを組み立てちゃうとそのあたりが利用できないのが結構大きなデメリットでしょうか。

window.onload = function() {
    // $.getJSON('sample.php') ...
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'sample.php', true);
    xhr.responseType = 'json';
    xhr.onload = function(e) {
        var ctx = document.getElementById('canvas').getContext('2d');
        var data = xhr.response;
        var scales = {xAxes: [{
            type: 'category',
            ticks: {
                maxRotation: 0,
                callback: function(value, index, values) { return [value, (index+1) + "月"]; }
            }
        }]};
        data.options["scales"] = scales;
        new Chart(ctx, data);
    }
    xhr.send();
 }

みたいな感じで無理矢理追加することはできますが…。