備忘録_66 / wordpress_27
今回の記事はWordpressページにグラフを表示する方法です。グラフを提示してプレゼンテーションを行うとより説得力が増します。と申しますより、言葉のみで全てを説明しきるには限界があります。
[図_1]
左の赤枠はワードプレス記事入力の際のエディッタ画面です。クラッシックエディッタを表示させております。
Q. wordpressだってこれだけツール群が揃っているのですから、さすがにグラフ機能ぐらいありますよね？
A. ないんだな、それが！
年号は令和ですよ！グラフを表示させる機能ぐらい標準装備してくさい…。物を売るってレヴェルじゃなかよp
というわけで、今回はGoogle Chartsの使い方です。プラグイン無しでグラフを表示させます。
この様にグラフが表示されます。👇
総務省統計局 1世帯あたりの餃子購入金額 2022年度版
宇都宮と浜松なにやっとっと、ちゃけど令和たい。もう好かんたい！やっぱ宮崎の餃子がいっちゃんうまか！
… いえ、、、私の言いたいことはそうではなくて、マウスカーソルを上に重ねるとちゃんとポップアップアニメーションするこの手の込みよう。私はいかにも仕事してます的な雰囲気が見事に醸し出せております。
これってめちゃ「よか感じばい！」みたいな事を私は言いたいのです…。
グラフを表示させる方法論
ブログ上にグラフを表示させる方法には考え得る限り3通りの方法があると思います。
- エクセルでグラフを作成しスクリーンショットで.jpg画像を作りはめ込む。
利点：グラフの利用頻度が低い場合、この方法が一番手っ取り早い。
欠点：データを修正する場合、画像を差し換える必要がある。 - Googleのグラフ表示API「Google Charts」を使いグラフを作り、そのままサイトに埋め込む。
利点：データを修正する際に、パラメータを弄るだけで済む。しかも無料！
欠点：updateなど、システム環境変化の拍子にグラフが表示されなくなる場合がある。 - WordPressプラグインの「Visualizer」を使う。
利点：グラフの利用頻度が高い場合、プラグインで実装してしまった方が楽である。
欠点：プラグインを使用するため当然サイトが重くなる。しかも有料！
この「Visualizer」ってUIのみで、実は中身はGoogleAP使っていたりするのではないでしょうか？
…とするなら、2.の欠点とも同じです。しかし、それでお金取るの…。
私は「グラフの利用頻度が低い」です。ですから本来は「１.エクセル」 が望ましいわけですが、しかしそれには理由があり私はエクセルを持ってない！のです。かと言ってプラグインを使うほどの事でもありませんし、消去法で「２.Google Charts」になりました。
Google Charts
[図_2]
Google Charts website画面
Google Chartsへのリンクです。
残念ながら英語版でのみのサービスになります。現在この手のサービスを行っているのはgoogleだけの様です。しかも無料。頭が下がります。
他のブロガーさん達はどうしているのか気になりますが、やはり同様にエクセル等でグラフを作りスクショを張り付けるか、GoogleAPIを使っているのではないでしょうか。基本的にこの二通りしかないような気がします。
こちらは利用登録やログインの必要はありません。
① ヘッダーメニューの [Guides] をクリックします。
[図_3]
Chart Gallery画面
② 左のダッシュボードメニューに利用できるチャートの一覧が表示されています。
この上には[ユーザーガイド]も載っています。（英語です！）
チャートの一覧（全18種類）
利用できるチャートの一覧です。決して注文付けているわけではないですが、レーダーチャートやポーラーチャート、ピラミッドグラフなど見当たらないものもありますね。
- Geo Chart（地図統計）
- Scatter Charts（分布図）
- Column Charts（棒グラフ）
- Histgram（ヒストグラム）
- Bar Charts（帯グラフ）
- Combo Charts（線棒混合グラフ）
- Area Charts（面グラフ）
- Stepped Area Charts（積層面グラフ）
- Line Charts（折れ線グラフ）
- Pie Charts（円グラフ）
- Bubble Charts（バブルチャート）
- Donuts Charts（ドーナツグラフ）
- Org Charts（階層図）
- Tree Map（樹形図）
- Table（表）
- Timeline（ガントチャート）
- Gauge（メーターゲージ）
- Candle Stick Charts（蝋燭足）
まぁ私が使えるのは棒グラフと円グラフだけなので特に問題はありません。（ならしぇからしか事言うじゃなか！）
グーグルチャートの使い方
[図_5]
Pie Chartの画面
ここでは最もよく使われる円グラフを例にとって説明します。
③ ダッシュボードメニューより[Pie Charts] をクリックします。
ページ上に円グラフを表示させるスクリプトが表示されます。
④ 右上のコピーボタンをクリックしてクリップボードに保存します。
WordPress
[図_6]
wordpress投稿記事の編集画面
① ウィジェットより[カスタムHTML]を探してクリックします。
カスタムHTMLはページにコードを追加するなど、個別のページカスタマイズを可能とするウィジェットです。
[図_7]
カスタムHTML入力画面
② ボックスにクリップボードに保存した Pie Charts のスクリプトをペーストします。
カスタムHTMLを使わずにそのまま本文にコードを貼るとプログラムとして認識されず、文字情報としてそのままコードが表示されます。
[図_8]
カスタムHTML入力した画面
③ この様にスクリプトコードが入力されました。
[プレビュー]をクリックするとグラフが表示されますが、その前にコードを何ヵ所か修正する必要があります。
そのまま表示させても入力サンプルデータのグラフが表示されるだけなので意味がありません。
<html>
<head>
<script type=“text/javascript” src=“https://www.gstatic.com/charts/loader.js”></script>
<script type=“text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Task’, ‘Hours per Day’],
[‘Work‘, 11],
[‘Eat’, 2],
[‘Commute‘, 2],
[‘Watch TV‘, 2],
[‘Sleep‘, 7]
]);
var options = {
title: ‘My Daily Activities‘
};
var chart = new google.visualization.PieChart(document.getElementById(‘piechart‘));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id=“piechart“ style=”width: 900px; height: 500px;”></div>
</body></html>
1⃣ <html>，<head>は必要ないので消去して下さい。
ここには基本構造タグを記述できません。コード中に6か所ありますがこれらを消します。
本来は<head></head>内で記述されるスクリプトはHTML構文の最初（head）内に記述される必要があります。しかしそれをやると結構面倒なので、掟破りですが本文（body）内に無理やり書き込んでしまいます。
取り敢えず動くからいいんじゃない？
2⃣ 項目，数値（パラメータ）と主題（タイトル）を修正します。
現在入力されているデータはダミーデータです。こちらを任意の数値に置き換えます。
項目，主題は日本語入力可能です。その場合、当然日本語で出力されます。
数値は半角数字で記述します。小数点以下の数値も入力が可能です。
3⃣ 円グラフを2つ以上出力したい場合、同じIDを使う事は出来ません。
id（’piechart‘）の名称を別の物に変えてやる必要があります。
例）（’piechart1‘）id=piechart1、（’piechart2‘）id=piechart2
1つしか使わない場合このままでOK
4⃣ デフォルトの設定でグラフの横幅は900pxになっています。
本文（メインカラム）の幅より大きい場合スクロールバーが表示されます。
以上の修正を加えた上で、
④ [プレビュー]ボタンを押すとこの様にグラフが表示されます。
こちらは横幅（width）を520pxにしております。
うまかっちゃねー♪
日本全国袋麺の人気ベスト5です。数値は東洋経済「袋麺売れ筋トップ200商品ランキング」からパクってきました。日本全国のPOSレジデータの集計だそうです。
1位：サンヨー食品「サッポロ一番みそ」2位「サッポロ一番塩」3位：日清食品「チキンラーメン」同率4位：ハウス食品「うまかっちゃん」東洋水産「マルちゃん正麺醤油」です。人気ベスト5品はおよそこれで決まりだと思うのですが、こちらはあくまでもポスレジのデータはこの様な数値をはじき出しているという事に過ぎません。順位についてはだいたいのトレンドということになるでしょう。
そもそも「うまかっちゃん」って関東で売っていませんし、この円グラフを見せられても関東人は今一つピンときません。時々、九州物産市等の催しで売っていたり、激安ドラッグストアで山積みになっていたり、AMAZONとかでも普通に買えるので全く手に入らないわけでも無いのでが、しかしそんな数値まではPOSデータには載って来ないわけです。つまり本当の正確なシェアについてはわかりません。
そもそも、各社の売り上げをベースにシェアを割り出すにしても、即席めん業界不動の1位は日清食品で目下その主力商品は「カップヌードル」なのですが、これってカップ麺と即席めんが合算されているわけですよね。同様に業界2位：東洋水産、3位：トップバリュ、4位：サンヨー食品、5位：マルタイ、6位：エースコック、7位：明星食品、8位：シマダヤ … … ハウス食品入ってないじゃないか！というか「マダムヤン」復刻してくさい！
それにトップバリュ、こういうプライベートブランドって製造ラインは大手に委託しているわけですよね。
世界シェアで考えるなら、2位：日清食品（明星）、5位：東洋水産、7位：サンヨー食品（エースコック）こちらはグループ会社合算になるわけですね。でもこちらが即席めんの大手三社で間違いないようです。
因みに私が好きな即席ラーメンは明星「中華三昧」です。
今回は以上です。ありがとうございました。
eyecatch image：七三ゆき / nanamiyuki.com（七三ゆきのアトリエ）