WordPress(Gutenberg) でChart.jsを使ったグラフ表示を試してみました。
javascript はほとんど触ったこと無いのですが、他のブログを参考に出力できました。
WordPress でグラフを出してみる
今回はWordPressにグラフを出してみたいと思い検索したところ、Chart.jsを使うと格好いいグラフが簡単に出せることがわかりました。
まずは以下のページを参考にグラフを出力してみます。
元の記事では『「テキスト」の状態で貼り付けるだけでできます』とありますが、おそらく以前のエディタだと思います。
ブロックエディタ（Gutenberg）では「カスタムHTML」のブロックを作って、そこに貼ると行けますね。
同じ内容だとつまらないので、自分の体重の変化のグラフにしてみます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart1" style="padding: 0px 10px 0px 10px;"></canvas>
<script>
var ctx = document.getElementById('myChart1').getContext('2d');
var myChart1 = new Chart(ctx, {
type: 'line',
data: {
labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
datasets:[{
label: '体重',
data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],
borderColor: "rgba(50,205,50,0.8)",
backgroundColor: "rgba(50,255,50,0.8)",
fill: false,
lineTension: 0,
}]
}
});
</script>「カスタムHTML」のブロックにコピペして「プレビュー」をやるとブロックエディタ上にグラフが表示されました！凄い簡単ですね！
このように、Chart.js で作ったグラフは単なる画像では無く、マウスをグラフのデータのところに持っていくとデータの数値が見えたり、用例(以下の例では「体重」)をクリックすると表示・非表示を選択できたりと格好いいことができます！
あれ、スマホで見るとそこまで格好良くない！？
ちなみにどうでもいいですが、体重は最初の5ヶ月で10kg落ちてその後は低迷中です。笑
最初の5ヶ月で体重を落とした主なやり方は、リングフィット＋月曜断食ですかね。
月曜断食は効果がありますが何も食べないのは体に悪いこともあるようなので、今はやり方を変えて継続中です。
月曜断食とお米ダイエットのオートミールを合わせた最強ダイエット！
コロナでテレワークとなり通勤が無くなったことから、最初は「リングフィット」でダイエットを始めましたが「月曜断食」を併用することで体重は半年ちょいで約80kgから約65kgまで落ちました！月曜断食はとても効果がありますが糖質制限であるため課題もあります。お米ダイエットをと入れることで最強のダイエットになります！
Chart.js のデータ部分をcsvファイルにする
先ほどのやり方ではデータを書き込まないといけないので、たとえば1000件とかデータがあると実質無理ですね。
そこで、csvファイルからChart.jsにデータを取り込んで表示する方法を調べてみたところ、以下の記事が参考になりました。
なるほど、前のサンプルではHTMLの<script>の中にjavascriptを書いてましたが、このサンプルではgraph.jsを引き込むようになってて、graph.jsでcsvファイルを読み込んでます。
この記事のサンプルのgraph.jsは長いので、まずはわかりやすいように先ほどの記事で作ったグラフと同じものを出すgraph.jsを作ってみましょう。
前回記事で書いたように、TeraTermでレンタルサーバー(CORESERVER)にログインして直接エディタ(vi)でソースを作りました。
ディレクトリは前回作った /virtual/cuzuser/public_html/teqnobreaker.com/work/ 配下。
同じ記事内で myChart の名前が重なるとダメらしいので、myChart2 にして、それに合わせて graph2.js にしときます。vi graph2.js で以下をコピペして作成。
ちなみにjavascriptは実行権はいらないようなので、Pythonの時のように chmod +x は不要です。
const conf = {
type: 'line',
data: {
labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
datasets:[{
label: '体重',
data: [79.5, 75.9, 75.65, 71.30, 70.73, 67.94, 67.11, 66.02, 67.45, 67.15],
borderColor: "rgba(50,205,50,0.8)",
backgroundColor: "rgba(50,255,50,0.8)",
fill: false,
lineTension: 0,
},],
},
};
const myChart2 = new Chart(document.getElementById('myChart2').getContext('2d'), conf);そして、WordPressの記事で「カスタムHTML」の方は以下にしました。
ちなみに、workフォルダの場所の指定が最初はわからなくて何回か試しながら「プレビュー」をしたところ以下で表示されました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart2" style="padding: 0px 10px 0px 10px;"></canvas>
<script src="../work/graph2.js"></script>表示はまったく同じですが、javascriptを外だしにした感じになります。
うまく行きました！
⇒ プレビューなどでは表示されてたのですが投稿だと表示されないと後で気付きました。でも、面倒なのでこのままにしときます。笑
ではデータをcsvファイルにしてみましょう。
元記事のソースを参考に体重のデータを読み込むように graph3.js を作ってみました。
ちなみに最初はデータが空でグラフが表示されて、csvファイルの指定を「../work/graph3.csv」にしたところ表示されました。
const label = [], num = [];
const req = new XMLHttpRequest();
req.open("GET", "../work/graph3.csv", true);
req.send(null);
req.onload = () => {
if (req.status != 404) {
const line = req.responseText.split("\n");
const data = [];
for (let i = 0; i < line.length - 1; ++i) {
const cells = line[i].split(",");
data.push(cells);
}
for (let row in data) {
label.push(data[row][0]);
num.push(data[row][1]);
}
}
}
const conf = {
type: 'line',
data: {
labels: label,
datasets: [{
label: '体重',
data: num,
borderColor: "rgba(50,205,50,0.8)",
backgroundColor: "rgba(50,255,50,0.8)",
fill: false,
lineTension: 0,
},],
},
};
const myChart3 = new Chart(document.getElementById('myChart3').getContext('2d'), conf);graph3.csvファイルは以下のようにしました。
最後の行に改行を入れるとグラフが1つ余分に表示しようとするので改行は無しにします。
4月, 79.5
5月, 75.9
6月, 75.65
7月, 71.30
8月, 70.73
9月, 67.94
10月, 67.11
11月, 66.02
12月, 67.45
1月, 67.15最後にWordPressの記事で「カスタムHTML」を以下にします。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<canvas id="myChart3" style="padding: 0px 10px 0px 10px;"></canvas>
<script src="../work/graph3.js"></script>行けました！
あれ？？出て無い？？
ブロックエディタでは「カスタムHTML」の「プレビュー」でグラフが表示されるけど、ブログで見ると何も出ない！？
うーん、、ちょっと原因不明なので、今日はここまでにしておきます。。
最終的にまだ上手く行っては無いですが、csvファイルを読み込んで表示できるようになれば、定期的にcsvファイルを更新することで記事を変更せずにグラフを変えることができます。
これを使うと、例えばビットコインの値動きをAPIで持ってきてグラフ化などしてWordPressの記事に載せることもできそうです。
本当はcsvファイルでは無くMySQLかSQLiteのDBを使ったものをやりたかったのですが、そこまでたどり着けず。とりあえず今日はここまで。
後日、原因と対処がわかったので後編に記載しました。
WordPress(Gutenberg)にChart.jsでcsvファイルのグラフ表示（後編）
前回の記事で WordPress のブロックエディタ( Gutenberg )の「カスタムHTML」で Chart.js のグラフを表示するやり方はわかりましたが、グラフを複数表示させた影響か、2つ目、3つ目のグラフが表示されてませんでした。 その後、調べた結果、対処がわかりました。以下の記事の後編です。
コメント