WordPressでグラフを作るならVisualizerがおすすめ
使うに堪えない重さと感じたため、このサイトで使用していたVisualizerのグラフもHighchartsのものに置き換えています。
使いやすさの点ではいまでも変わらないのですが、あまりお奨めできなくなりました。
highchats.jsのクラウド版、Highcharts Cloudが非常に使いやすいので、今はそちらをお勧めしています。
jQueryやWordpress用のグラフ作成のプラグインは数多くありますが、2次元グラフを使うならWordpressプラグイン、Visualizerが使いやすかったのでここで紹介。
Visualizerを使うとCSVのデータを取り込んで、グラフタイトルや軸のタイトルと目盛り幅を設定するだけでインタラクティブなグラフが作れます。ポイントするとその部分の数字が表示されるので、数字を直接利用者に確認してもらうことができます。
データの入れ替えも簡単で、既存のグラフを編集すれば、それまでに貼り付けたグラフの中身も更新されます。
作成したグラフはアドミンバーのメディアーVisualizerからアクセスし、グラフの下部に表示されているショートコードを入力するだけで投稿ページに貼り付けることができます。
たとえばこのサイトで［visualizer id="962″］と記事に書くと、作成済みのブラウザVivaldiのシェアのグラフが表示されます。
Visualizer管理画面からeditでデータを更新すると、貼り付けた全てのページのグラフが変更されます。つまりグラフの内容を変更しても貼り直す手間がありません。ただし2つ以上の系列のデータは並べられないので、凝ったものを作りたい時はchart.jsを使う必要があります。
インストール
インストールはプラグイン新規追加から行えます。
インストールして有効化すると、アドミンバーの「メディア」にVisualizerという項目ができます。
グラフ作成はこの「Visualizer Library」より行います。
グラフを作成
グラフ作成のためのデータ入力は、CSV形式のインポートで行います。
CSVファイルとは、カンマ[,]で区切られたデータで、ExcelやCalcといった表計算ソフトのテーブルエクスポートで作成できます。
CSVファイルの準備ができたら、Visualizer Libraryページの上部に表示されているAdd Newを選択して開始します。
グラフの選択種類
無料で使えるグラフは、円(Pie)、折れ線(Line)、エリア(Area)、地図(geo)、横棒(Bar)、縦棒(Column)、ゲージ(Gauge)、分散(Scatter)、ろうそく(Candlestick)の9種類。
グラフに合った型のデータを入れればだいたいうまくいきます。
Geoは国名と数字で記載ですが、国名のフォーマット一覧は見当たらないので、英語名を使って試しつつやるしかなさそうです。
| Country | Popularity |
| string | number |
| Germany | 200 |
| United States | 300 |
| Brazil | 400 |
| Canada | 500 |
| France | 600 |
| RU | 700 |
| Japan | 50 |
| China | 100 |
Google Sheetsからインポート
Visualizerでのグラフ作成はGoogle Sheetsからのインポートが楽です。シートをCSV形式で公開しておき、そのURLをVisualizerのグラフ作成ページの「From Web」に入力するだけ。
Google Sheets、CSVの公開手順
ファイルからウェブに公開を選択して、
カンマ区切り形式（CSV）を選択。さらに公開するドキュメント（シート）を決めたら
公開ボタンをクリック。するとURLが表示されるので、
それをVisualizerのFrom Webに入力。
ファイルからインポート
PCに保存されたファイルからのインポートは、あらかじめExcelやCalcでCSV形式でエクスポートしておく必要があります。
From Computerを押すとファイルアップロード画面が表示されるので、作成したCSVファイルを選択。データを変更するたびにエクスポート→ファイル探しが意外と手間なので、Google Sheetsが簡単です。
グラフ作成
インポートに成功すると、すぐにグラフが表示されます。
次に「Advanced」ボタンを押して、グラフのタイトルや目盛りの設定をします。
General Settings
グラフタイトルの入力と、タイトルや凡例の位置を調整できます。
Horizontal Axis
横軸（水平軸）の設定を行います。General Settingsではタイトルと位置の設定を指定します。
Grid linesでは目盛り数を指定できて、-1だと自動、2以上だとその数だけの目盛りが表示されます。Minor Grid Linesも同様に、小目盛りの本数を指定します。
View Windowではデータの範囲指定を行えます。元データが大きくても、ここでグラフに表示させる範囲の調整が行なえます。上の表の例で言えば、2016/5から表示させたければ、Minimum Valueを5として、Maximum Valueを14と指定すれば、2016/5から2017/2までが表示されます。Maximum Valueを設定する場合はMaximum Valueも指定しなければいけないので注意して下さい。
Vertical Axis
縦軸（垂直軸）の設定を行います。内容はHorizontal Axisとほぼ同じ。
Lines Settings
Line Width And Point Sizeでは、線の太さと頂点の大きさを指定します。点のサイズは4以上でないと分かりにくいようです。
Curve Typeは曲線にするか直線にするかを選べます。
Focus Targetは、クリックした時に選択する点をひとつだけにするか、同じ列の複数の点を同時に表示させるかを選べます。項目数が多い時はSingle Data Pointを、少なければAll Data Pointsがいいかと。
Selection Modeは選択（フォーカス）することのできる場所を、一つだけにするか、複数にするかを指定します。これは好み次第です。
Point Opacityでは、フォーカスした点の真ん中の○の透明度を指定できます。0にすると中黒が透明になります。
Layout & Chart Area
Layoutでは、枠線の有無やグラフのサイズを指定します。WidthとHeightはグラフのサイズを、Stroke Widthでは枠線の太さを調整できます。
Chart Areaは枠内に占めるグラフのサイズを設定します。
Margin,Width,Heightには%と絶対値が使えます。
おしまいに
このページを書くためにあらためて一つ一つの項目を確認したところ、設定項目の多さに驚きました。2次元グラフ作成に必要な一通りのことが、クリックだけでできてしまいます。
個人的には世界地図が使えるのはかなりの高ポイント。
また、既存のグラフを編集すると、貼り付け済みのページのグラフも新しいデータに入れ替わるので、定期的に更新するグラフの管理が楽になります。