Chart.jsで作成したグラフにデータを読み込ませる3つの方法(直接、CSVファイル、カスタムフィールド)

簡単お手軽にグラフを作成し、ホームページなどに表示させることができる Chart.js 。
グラフ化したいデータを読み込ませる方法を3つご紹介します。

目次

<script> に直接記述する

この方法が基本となります。

Chart.jsの<script>内、dataに記述します。
<script>の基本については Chart.jsでホームページにグラフを表示するための基本知識 を参照してください。


data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            //labels → データの項目を入れます(通常棒グラフだとx軸)
            datasets: [{
                data: [190.0, 73.0, 126.0, 143.0, 99.5, 221.0, 195.5, 207.5, 62.0, 248.0, 80.5, 205.5]
                //data → データ系列を入れます(通常棒グラフだとy軸)
                //        上のlabels(項目)に対応します
            }]
        },

「labels」にデータ項目、「datasets.data」にデータ系列の数値を入れます。

CSVファイルを読み込ませる

「labels」と「datasets.data」を変数にして、CSVファイルのデータを各変数に読み込ませる方法です。

・CSVファイルは「カンマ区切り」で作成する
・ワードプレスで使用するときは文字コードを「UTF-8」にする

<script>
    var title = [];
    main();

    function main() {
        var req = new XMLHttpRequest();
        var filePath = 'chart.csv'; //CSVファイルのパスは適宜変更してください。
        req.open('GET', filePath, true);
        req.onload = function() {
            data = csv2Array(req.responseText);
            drawBarChart(data);
        }
        req.send(null);
    };

    function csv2Array(str) { //
        var csvData = [];
        var lines = str.split('\n');
        title = lines[0].split(',');
        for (var i = 1; i < lines.length; ++i) {
            var cells = lines[i].split(',');
            csvData.push(cells);
        };
        return csvData;
    };

    function drawBarChart(data) {
        var tmpLabels = [], //ラベル(項目はひとつ)
            tmpData1 = [],
            tmpData2 = [],
            tmpData3 = []; //データ系列の数だけ増やしてください
        for (var row in data) {
            tmpLabels.push(data[row][0])
            tmpData1.push(data[row][1])
            tmpData2.push(data[row][2])
            tmpData3.push(data[row][3]) //データ系列の数だけ増やしてください
        };
        tmpLabels = tmpLabels.slice(0, -1);
        //エクセルでCSVファイルを作るとデータの最後にカンマ(,)が追加されて、グラフに空白列が増えてしまうので最後のカンマを削除する

        var ctx = document.getElementById('myChart_csv_sample').getContext('2d');

        var myChart_csv_sample = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: tmpLabels,
                datasets: [
                    {
                        label: title[1],
                        data: tmpData1
                    },
                    {
                        label: title[2],
                        data: tmpData2
                    },
                    {
                        label: title[3],
                        data: tmpData3
                    } //データ系列の数だけ増やしてください
                ]
            },
            options: {
                //省略
            }
        });
    };
</script>

「labels」が「datasets」の中に入っていることに注意してください。


【参考】(詳細に説明されていて勉強になります)
CSVファイルをグラフ化
Javascript Chart.jsを用いてグラフを作成する

カスタムフィールドに入力したデータを使う

ワードプレスのカスタムフィールドに入力したデータ(数値)をChart.jsでグラフ化して、同記事内に表示する方法です。

事前準備

1.カスタムフィールドを設定する
投稿記事にカスタムフィールドを入力できるようにします。
私はAdvanced Custom Fieldsを使用しました。

2.カスタムフィールドを出力するテンプレートを作成する
カスタムフィールドを出力させる記述の後に、<canvas>と<script>を記述してください。

「9科目の中から得意な5科目を選んで0~100の数値(得意度)を入力するカスタムフィールドの数値を反映するレーダーチャート」を例とします。

<div class="wrap-chart">
    <div class="chart-container-rader">
        <canvas id="myChart_radersample2">ここにチャート表示</canvas>
    </div>
</div>
<script>
    //ページ内の科目を取得
    var subject01 = document.querySelectorAll('.subject')[0].innerHTML,
        subject02 = document.querySelectorAll('.subject')[1].innerHTML,
        subject03 = document.querySelectorAll('.subject')[2].innerHTML,
        subject04 = document.querySelectorAll('.subject')[3].innerHTML,
        subject05 = document.querySelectorAll('.subject')[4].innerHTML,

        //ページ内の数値を取得
        subjectnum01 = document.querySelectorAll('.subject-num')[0].innerHTML,
        subjectnum02 = document.querySelectorAll('.subject-num')[1].innerHTML,
        subjectnum03 = document.querySelectorAll('.subject-num')[2].innerHTML,
        subjectnum04 = document.querySelectorAll('.subject-num')[3].innerHTML,
        subjectnum05 = document.querySelectorAll('.subject-num')[4].innerHTML;

    //取得した科目と数値をChart.jsに入れる
    var data = {
        labels: [subject01, subject02, subject03, subject04, subject05],
        datasets: [{
            label: '科目',
            data: [subjectnum01, subjectnum02, subjectnum03, subjectnum04, subjectnum05],
            backgroundColor: 'rgba(255,135,0,0.2)',
            borderColor: 'rgba(255,135,0,1)',
            pointBackgroundColor: 'rgba(255,135,0,1)',
            pointBorderColor: 'rgba(255,135,0,0)',
            pointBorderWidth: 0,
            pointRadius: 5,
            pointStyle: 'circle',
            pointHoverRadius: 5,
            pointHitRadius: 5
        }]
    };

    var ctx = document.getElementById('myChart_radersample2').getContext('2d');

    var myChart_radersample2 = new Chart(ctx, {
        type: 'radar',
        data: data,
        options: {
            title: {
                display: true,
                text: '得意教科チャート',
                padding: 4,
                fontSize: 20
            },
            legend: {
                display: false,
                labels: {
                    fontColor: 'rgb(5, 99, 132)',
                    fontSize: 16
                }
            },
            scale: {
                pointLabels: {
                    fontSize: 15,
                    fontColor: 'rgb(0, 65, 112)',
                    padding: 20
                },
                ticks: {
                    beginAtZero: true,
                }
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            },
            maintainAspectRatio: false,
        }
    });
</script>
  • 国語98 %
  • 社会86 %
  • 英語77 %
  • 美術83 %
  • 家庭科91 %

(出力されたカスタムフィールドの値)

ここにチャート表示

簡単な補足

・5角形のレーダーチャートなので、カスタムフィールドに5個以上入力した場合はフィールドの上から順に5個が取得されます。
・グラフに入れる変数の数で角が変わります。

// この場合は三角形になります
<script>
    var subject01 = document.querySelectorAll('.subject')[0].innerHTML,
        subject02 = document.querySelectorAll('.subject')[1].innerHTML,
        subject03 = document.querySelectorAll('.subject')[2].innerHTML,

        subjectnum01 = document.querySelectorAll('.subject-num')[0].innerHTML,
        subjectnum02 = document.querySelectorAll('.subject-num')[1].innerHTML,
        subjectnum03 = document.querySelectorAll('.subject-num')[2].innerHTML,

・「class=”subject”」が付いている<span>内の文字を「科目」、「class=”subject-num”」が付いている<span>内の文字を「得意度(数値)」としてグラフ用の変数に入れます。

// サンプルです
<?php
$num = get_field('subject_japanese');
if($num){ ?>
<li><span class="subject">国語</span>:<span class="subject-num"><?php echo $num; ?></span> %</li>
<?php } ?>

【重要】Chart.jsで変数を使う場合の注意点

Chart.jsで作成したグラフは、通常ならページ内にいくつでも表示できます。

しかし、CSVファイルやカスタムフィールド値など変数を使ってデータをセットすると、同一ページの中に1つしか表示できなくなります。

CSVファイルを使ったグラフをページの中に複数表示させたい場合は、グラフごとに独立したhtmlページを作成し、それぞれのhtmlファイルを「iframe」で表示させます。
実際にこの方法を使ったページは以下を参照してください。

ちょいプラス

CSVファイルやカスタムフィールドとChart.jsを組み合わせて、ホームページの表現の幅を広げましょう。

【Chart.jsに関する記事まとめ】

よかったらシェアしてください!

コメント

コメントする

CAPTCHA

目次
閉じる