phpの値をjavascriptで受け取って、Chart.jsでグラフ描画【円グラフ】

【PHP】phpでDB不要のアンケート機能を作成する

f:id:duo-taro100:20160218004611p:plain

phpの値をjavascriptで受け取って、Chart.jsでグラフ描画【円グラフ】

Chart.jsは2.1を使用する。
今回はCDNを利用。
file.phpに以下を追加。
・chart.js呼び出し
・グラフ表示箇所
・グラフ描画実装

■chart.js呼び出し

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

■グラフ表示箇所
グラフ表示部分を追加。

<canvas id="myChart" width="200" height="200"></canvas>

■グラフ描画実装
同様に、グラフ描画機能を実装

        var array = <?php echo json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
        console.log(array);

        // 以下追加部分 Documentをちょっといじっただけ
        // http://www.chartjs.org/docs/latest/
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ["1:いちご", "2:みかん", "3:りんご"],
                datasets: [{
                    label: 'アンケート',
                    data: array,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                    ],
                    borderWidth: 1
                }]
            }
        });