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

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（項目）に対応します
            }]
        },

<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>

<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>

// この場合は三角形になります
<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,

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