本稿では、Chart.jsというJavaScriptのライブラリーを使ってWordPress上にグラフ・チャートを描く方法をご紹介します。プラグインのインストールは不要で、別途編集したHTMLを張るだけで描写可能です。基本的なプログラミングの知識を要しますが、WordPressのグラフプラグインも決して使いやすいとは思えない他、Chart.jsはプレーンなJavaScriptで記述されているので、WordPress以外のあらゆるWebサイト・Webアプリ制作で使えます（WordPressでしか使えないプラグインより応用範囲が広い）。また、React（react-chartjs-2を使用）でも基本的な使い方が同じです。
本稿で使用したバージョン：
- Chart.js 3.6.2
- WordPress 5.9.3
事前準備
Chart.jsを使うためには、WordPressの編集画面のカスタムHTMLというブロック（下記）にHTML及びJavaScriptを埋めたScriptタグを記述しますが、WordPressの編集画面はHTMLの記述には向かないので、別途HTMLを記述するための専用のメモ帳（エディター）をPCにインストールします。このメモ帳はWordPressとは直接関係ないです。私のお勧めはVisual Studio Code又はSublime Textです。Visual Studio Codeの方が慣れるとずっと使いやすいですが、Sublime Textはコードも書けるただのメモ帳ですので、プログラミングをされない方はSublime Textで十分だと思います。いずれも無料で、Windowsでも、Macでもインストール可能です。
Chart.jsでの棒グラフ（ヒストグラム）の例
下記は私のこちらの記事「エンジニアの副業としてのブログ – ConohaWingでの始め方もご紹介」で使用した3,000PV時の収益の分布を示した棒グラフ（あるいはヒストグラムとも言う）です。こちらもカスタムHTMLにHTMLを埋め込むだけで作成しています。
具体的な使い方（コード）は次の通りです。こちらをHTMLカスタムブロックにコピペするだけでも、上記のヒストグラムは表示されると思います。次のセクション以降、順に説明いたします。
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2"></script>
<div class="chart_container">
<canvas id="myChart" width="250" height="250"></canvas>
</div>
<script>
const data = {
labels: ['500円未満', '500円-1,000円', '1,000-1,500円', '1,500-2,000円','2,000円超'],
datasets: [{
label: '収益の分布',
data: [8, 3, 4, 3,2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
borderWidth: 1
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true,
max:10
}
}
}
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
Chart.jsをインポートするscriptタグ
1行目のscriptタグでは、Chart.jsをCDNでインポートします。@3.6.2はバージョンの指定です。Chart.jsの公式ホームページではバージョンの指定なく、最新のChart.jsをインポートするコードが紹介されていますが、私の試した限りではWordPress上ではうまく表示できないバージョンがあります。よって、最新のChart.jsをインポートするコードではある日突然ブログ上で表示されないことが起こり得るので、WordPressでChart.jsを使う場合はバージョンの指定をお勧めいたします。@3.6.2は、2022年5月現在WordPressで正常に動作する最も新しいバージョンです。
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2"></script>
canvasタグ
続くcanvasタグはグラフを描写する領域です。Chart.jsに限らず多くのJavaScriptのグラフライブラリー、その他2Dのグラフィックスではcanvasタグの中に対象を描写します。canvasタグ自体に横幅widthと高さheightを規定するプロパティがありますが、WordPress上はうまく大きさの調整が出来ないので、canvasタグをdivタグで囲い、divタグのクラス（ここではchart_container）へのCSS指定で大きさの調整をします。
<div class="chart_container">
<canvas id="myChart" width="250" height="250"></canvas>
</div>
参考までに私がchart_containerクラスで適用しているCSSをご紹介します。WordPressでは、外観-カスタマイズ-追加CSSで記述します。横幅を親要素の80%にして、中央に寄せています。
.chart_container {
width:80%;
margin-left:auto;
margin-right:auto;
}
チャートの内容を記述するscriptタグ
2つ目のscriptタグの内側には、3つの要素を記述します。dataオブジェクト、configオブジェクト、それにChartオブジェクトのmyChartです。dataはオブジェクトで、ラベル、データ、グラフ色、グラフの境界色と幅を指定します。configオブジェクトでは、typeにてグラフの種類を指定、dataにてdataオブジェクトも取り込み（この結果、configオブジェクトが全ての情報を保有）、optionsにてその他グラフの諸設定を行います。最後myChartでは、canvas内で、グラフの全ての情報が格納されたconfigに基づいてグラフを描写します。以下dataオブジェクトから順番に説明いたします。
<script>
const data = {
labels: ['500円未満', '500円-1,000円', '1,000-1,500円', '1,500-2,000円','2,000円超'],
datasets: [{
label: '収益の分布',
data: [8, 3, 4, 3,2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
borderWidth: 1
}]
};
labels
配列の内側に棒グラフのラベルを指定します。本事例では棒グラフが5本あるのでラベルも5つ定めています。
label
labelsではなくこちらはlabelです。グラフの名称を定めます。
data
dataオブジェクト内に、さらにdataというキーを定め、配列内に具体的なグラフの値を記述します。ReactやWebサイトではDBや外部APIから取得したデータをここで格納します。
backgroundColor
棒グラフの色をrgbaを使って記述します。
borderColorとborderWidth（任意）
棒グラフのボーダー（境界線）の色をrgbaを使って記述します。ボーダーが不要な場合は、borderColorを定めなくても問題ありません。borderWidthはボーダーの幅（太さ）を定めます。borderColorも定めなくても問題ありません。
次はconfigオブジェクトです。typeでグラフの種類を指定します。bar以外にも、scatter, line, bubbleなど、Chart.jsでは現在9種類のチャートに対応しています。dataには先ほどのdataオブジェクトを渡すだけです。最後のoptionsでは様々なグラフの設定をすることができます。ここではほんの一例で、y軸の起点（0）と高さ（10）を定めています。詳細はChart.jsの公式ホームページをご確認ください。
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true,
max:10
}
}
}
};
最後がChartオブジェクトです。Chartオブジェクトには2つの引数を渡します。1つ目の引数でcanvasタグを取得、2つ目の引数で先ほど作成したconfigオブジェクトを渡します。
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
1つのページに2つ以上のグラフを描く場合
同じページではscriptタグが共有されていることから、1つのページに複数のグラフを表現する場合には幾つかの名称を変更する必要があります。一つ目がcanvasタグのidです。先ほどはmyChartとしていますが、myChart2などに変更します。dataとconfigもそれぞれdata2, config2などに変更、config2のなかで受けるdataのバリューもdata2に変更します。なお、config2内のキーは2つ目のグラフでもdataのままです（結果、下記のようになります）。
data: data2,
myChartもmyChart2とした上、getElementByIdの内側も、canvasタグで指定したidのmyChart2に変更します。3つ目のグラフがある場合は、同様に末尾の数字を3などにします。ここまで読んで頂ければChart.jsの公式ドキュメントも難なく読めると思います。また、プレーンなJavaScriptで作成するWebサイト・アプリや、Reactでも苦労しないと思います。本日も最後まで読んで頂きありがとうございました。
