【WordPress】Chart.jsでグラフを簡単に作成する方法
Scriptでグラフを生成する方法
いちいちグラフを画像ファイルで準備するのは容量も無駄で非効率ですよね。
備忘録も兼ねて、Chart.jsを使ってグラフを生成する方法を記載します。
※コードの最適化は出来ていない為、手っ取り早く導入したい人向けです。
①Function.phpを編集
先ず、下記コードをFunction.phpに追記して下さい。
/** Chart.js-cdn **/
function insert_script(){
wp_enqueue_script('Chart','https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js',array('jquery'),'2.4.0');
}
add_action('wp_enqueue_scripts','insert_script');/** Chart.js-shortcode **/
function canvas_tag($atts){
extract(shortcode_atts(array(
'id' => null
),$atts));$html = <<
eof
;
return $html;
}
add_shortcode('canvas','canvas_tag');
②グラフコードの作成
次に、グラフを生成したい記事内に下記コードを記載して下さい。
※最初と最後に、を追記してください。
var ctx = document.getElementById("myChart1");
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ["苦味", "酸味", "甘味", "香り", "コク"],
datasets: [{
label: 'oranges',
backgroundColor: "rgba(255,153,0,0.4)",
borderColor: "rgba(255,153,0,1)",
data: [2, 5, 5, 5, 2],
}]
},
options: {
legend: {
display: false
},
scale: {
pointLabels: {
fontSize: 15 //フォントサイズ
},
ticks: { //http://www.chartjs.org/docs/#scales-radial-linear-scale
stepSize: 1, // 目盛の間隔
max: 5, //最大値
beginAtZero: true
}
}}
});
③ショートコードの挿入
最後に、グラフを生成したい場所に下記コードを記載して下さい。
※「」を[]に変えて記載してください。
「canvas id="myChart1″」
すると、下図の様なレーダーチャートを生成することが出来ます。
type属性を"bar"に変えると縦棒グラフになります。
設定は色々変える必要はありますが、是非試行錯誤して自分好みのグラフになるよう試してみて下さい。