簡単お手軽にグラフを作成し、ホームページなどに表示させることができる Chart.js 。
グラフ化したいデータを読み込ませる方法を３つご紹介します。
＜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ファイルのデータを各変数に読み込ませる方法です。
<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でグラフ化して、同記事内に表示する方法です。
１．カスタムフィールドを設定する
投稿記事にカスタムフィールドを入力できるようにします。
私はAdvanced Custom Fieldsを使用しました。
２．カスタムフィールドを出力するテンプレートを作成する
カスタムフィールドを出力させる記述の後に、<canvas>と<script>を記述してください。
「９科目の中から得意な５科目を選んで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>[myphp file=’contents-radersample-orange’]
簡単な補足
・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」で表示させます。
実際にこの方法を使ったページは以下を参照してください。
コメント