月と東京タワー

グラフ作成プラグインVisualizer 使い方と表示されない時の対応など【WP】

   

ワードプレスにグラフを表示したい場合、方法は色々とありますが、さっと作れて後々数値が変わった時の編集も簡単に出来ると便利です。

ワードプレスには「Visualizer:Charts and Graphs」というプラグインがあります。データから勝手にグラフを作ってくれて、生成されたショートコードを貼るだけで終わりです。

すごく簡単にグラフが作れるこのプラグイン。使い方と表示されない場合の対応などをメモ。

Visualizer:Charts and Graphsの使い方

WordPress Charts and Graphsをインストールして有効化

いつも通りです。

ダッシュボードから「プラグイン」→「新規追加」で、「WordPress Charts and Graphs」を「今すぐインストール
Charts_and_raphs_プラグインの追加

インストールしたら有効化して下さい。

Googleスプレッドシートにデータを準備

グラフにするデータはPCに保存されたcsvファイルをアップロードする方法と、Web上にあるスプレッドシートから取り込む方法があります。
PCからアップする方法は、普通とまったく同じなので、スプレッドシートからのやり方で作ってみます。

スプレッドシートにデータを入力

スプレッドシートにグラフの元になるデータを入力します。

例として「トランプとヒラリーのマッチアップ支持率推移」グラフを作ることにします。

スプレッドシートを公開

作ったシートを公開します。

公開の手順は、まずシートの「ファイル」から「ウェブに公開」を選んで
Visualizerスプレッドシートの公開

現れた窓で、公開の詳細を設定します。この時、形式を「カンマ区切り形式(.csv)」にして下さい。

ここで下に表示されるのが、このシートのURLになります。

Visualizerスプレッドシートの公開URL

これでデータの準備は完了です。
次にワードプレスのVisualizerに戻ってグラフを作ります。

グラフ作成

インストールしたVisualizerは、ダッシュボード左の「メディア」の中にあります。

上のグレーのボタン「Add New」を押します。
Visualizer作成画面Add New

グラフの種類を選択

作れるグラフは、折れ線、面、棒(横、縦)、円、地図、散布図、ローソク足、インジケーターの9種類です。

作りたいグラフの種類を選んで、右下「Next」をクリック
Visualizerチャートの種類選択

データを読み込んでグラフに

すると、こういう画面が出ます。ここにグラフ化したいデータを流し込めば折れ線グラフが出来ます。

Visualizerデータ取り込み方法選択

右側に「From Computer」「From Web」というボタンが並んでいます。WEB公開済みのスプレッドシートからデータを読むので、右の「From Web」をクリックします。

URLを入力するウィンドウが表示されます。ここに先ほど公開したスプレッドシートのURLをコピーペーストしてください。

VisualizerデータURLre

 

OK」を押して待つこと数秒…

Visualizerグラフが出来た

もう出来た!

…も同然ですが、このグラフを整形します。

グラフの設定

グラフの設定は、右下「Advanced」から始めます。

Visualizer_グラフ設定へ

General Settings

Chart Title…グラフのタイトルを入力します。日本語も表示できます。
Chart Title Position…グラフタイトルの位置を決めます。
Chart Title Color…タイトルの色を決めます。

と、この要領で順に好きな設定を選んで行きます。項目を変更すると左のグラフプレビューに反映されるので、ポチポチやっていけば大体分かると思います。

分かりにくそうな箇所だけ

Axes Titles Position…軸のタイトルの位置です。不要なら「none」を。
Legend…凡例です。凡例を表示する必要のない場合は、「Legend」の「Position」から「Omit the Legend」を選択して下さい。
Tooltip…マウスゼスチャーによるグラフのインタラクティブな変化全般です。数値を表示したりなど。
Trigger…tooltipの発動条件をマウスオーバーにするかクリックにするか。それぞれやってみると分かります。
Direction…軸の方向です、Reverseにすると軸を反転できます。
Focus Target…tooltipでグラフデータを表示するとき、選択している要素についてのみにするか、同じグループのものをすべて表示するのか。(ここでは同日のトランプとヒラリー両方の値のことです)

すべて設定を終えたら右下「Create Chart」をクリック。これでグラフは完成です。

Visualizer_グラフ設定完了

ショートコードを貼ってグラフを表示

Create Chart」を押すと、最初のVisualizer Libraryに戻ります。そこに今作ったグラフがライブラリされていて、グラフの下にショートコードが生成されているはずです。

そのショートコードをグラフを表示したい場所に貼ればすべて完了です。

ぺたっと貼ると…こう表示されます。簡単にインタラクティブでレスポンシブなグラフが作れました。

グラフの修正・編集

グラフを修正したり、データを変更したりしたい時は、Visualizer Libraryのショートコードの隣にある鉛筆アイコンをクリックしてください。

設定画面に戻って編集が出来ます。

Charts and Graphsで作ったグラフが表示されない時は

原因はいくつかあると思いますが、我が家のケースだけご報告を。

問題になっていたのはAsync JS and CSSというプラグインでした。

Async JS and CSSは、javascriptを非同期にしてくれるプラグインです。これを切るとVisualizerのグラフは表示されるようになりました。ただ、Async JS and CSSはその名の通り、CSSを後回しにする機能もあり、CSSはこの件とは関係ないので、プラグインの設定を、Scriptだけノータッチになるようにしました。
Async Js and css設定
やや応急処置チックですが、これでVisualizer:Charts and Graphsのグラフは表示出来るようになりました。
日頃ページの速度にそれほど困っていないサイトなら、単純にAsync系のプラグインをはずしてしまうのでいいと思います。

JSの非同期問題をどうするか、学ばないとダメっぽい感じです。

スポンサーリンク


 - WordPress