WordPressでChart.jsを使用して綺麗なグラフを表示しよう

カテゴリー:WordPress

今回の投稿は、WordPressで投稿にグラフを表示する方法を備忘記録として投稿します。JavaScriptライブラリとして、Chart.jsを使用してグラフを表示していこうと思います。Chart.jsでは、棒グラフ、折れ線グラフ、レーダーチャート、円グラフなど8種類ものグラフが表示できます!

Chart.js

Chart.jsは、HTML5のCanvasタグを使用して、棒グラフ、折れ線グラフ、レーダーチャート、円グラフなど8種類のグラフを描画することができ主要なブラウザで利用ができます。そして、レスポンシブ対応な点も使いやすいです。

Chart.jsをCDNでWordPressに読み込む

編集するファイルはテーマ内のfunctions.phpです。そこで、wp_register_script関数でjsファイルを登録し、wp_enqueue_scriptで読み込みます。編集前は必ずfunctions.phpのバックアップをしておくことが良いと思います。

・functions.php
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
  wp_register_script('chart-js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js', null, null, false);
  wp_enqueue_script('chart-js');
}

WordPressで固定ページの時だけ・特定の投稿だけなど必要な時に読み込みたいケースもありますよね。
投稿時のページだけで読み込みたい場合のケースはこちら。

・functions.php
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
if (is_single()) {
    wp_register_script('chart-js', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js', null, null, false);
    wp_enqueue_script('chart-js');
  }
}

Chart.jsでレーダーチャートを表示

アニメーションがあって綺麗なグラフが表示がされます。設定で細かな点が変更できるのもChart.jsの良いところです。このブログではレーダーチャートで使用していこうかなと検討中です。昔のゲームの攻略本みたいですね。

・Chart.jsの使用例
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'radar',
  data: {
    // 項目ラベルを指定
    labels: ["HP", "MP", "攻撃力", "防御力", "素早さ", "賢さ"],
    datasets: [{
      // 凡例とツールチップに表示される値を指定
      label: 'モンスターA',
      // データの値を設定
      data: [300, 0, 200, 210, 160, 40],
      // グラフの背景色を設定
      backgroundColor: ['rgba(255, 159, 64, 0.2)'],
      // グラフ周りの線を設定
      borderColor: ['rgba(255, 159, 64, 1)'],
      // グラフ周りの線の太さを設定
      borderWidth: 1,
      // 各データ値の点の背景色を設定(先端の丸部分)
      pointBackgroundColor: 'rgba(255,159,64,1)',
      // 各データ値の点の線の色を設定(先端の丸部分)
      pointBorderColor: '#fff',
      // Hover時の各データ値の点の背景色を設定(先端の丸部分)
      pointHoverBackgroundColor: '#fff',
      // Hover時の各データ値の点の線の色を設定(先端の丸部分)
      pointHoverBorderColor: 'rgba(255,159,64,1)',
      // 各データ値の点の周りにマウスイベント反応範囲を指定(単位:px)
      pointHitRadius	: 5
    }, {
      label: 'モンスターB',
      data: [20, 100, 10, 25, 100, 30],
      backgroundColor: ['rgba(0,115,168,0.2)'],
      borderColor: ['rgba(0,115,168,1)'],
      borderWidth: 1,
      pointBackgroundColor: 'rgba(0,115,168,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(0,115,168,1)',
      pointHitRadius	: 5
    }]
  },
  options: {
    // レスポンシブ指定
    responsive: true,
    scale: {
      ticks: {
        // 最小値の値を0指定
        beginAtZero:true,
        min: 0,
        // 最大値を指定
        max: 1000,
      }
    }
  }
});
</script>

投稿時のChart.jsはversion2.7.1で、LicenseはMIT licenseです。その他の詳しい内容は下記の公式サイトから確認ができます。
Chart.jsの公式サイトへ


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。