フリーでも使えるWebチャート「amCharts」がベンチマークグラフ描写に最適だった

amChartsのアイキャッチ画像
Sponsored Link

グラフをWebで綺麗に見せたい

現代では、如何なるものも「映え」なければ、すぐ飽きられて捨てられてしまう。パソコンやスマホでのベンチマークの結果だって映えさせたい。わかる、とってもわかる。

だがしかし、Excelでベンチマーク結果を作ると、このような壁に当たったことはないだろうか?

Excelで作るベンチマークグラフの壁(欠点)
  • 映えない
    いかにもExcel感が出てしまう。一言でダサい
  • Webに向かない
    Excelグラフの画像貼付けは、レスポンシブで文字が滲む。文字や数字を選択できない
  • 作成が大変
    デザインを凝るとグラフ作成に時間がかかるし、流用しづらい

そんな、よく目にするExcelベンチマークグラフの代表例はこんなグラフだ。

Excelにて秒で作成できたベンチマークグラフ

グラフとしてはシンプルで悪くはない。ただ、シンプルすぎて情報が入ってこない。秒で作成したグラフは秒で素通りされるものだ。ベンチマークを取る側の苦労が全く伝わらない。

一目で「Ryzen7 2700Xのマルチスレッド性能がとても良い」という情報は伝わるが、具体的なベンチマークの値が不明だし、グラフの中に無駄にスペースが多すぎる。

さらに画像なので、レスポンシブによる自動縮小でPNG画像でも輪郭がぼやける。目の焦点が合っていないのでは、と気持ち悪くなる。とってもイケていない。

結果、映えないので、挙句の果てにはグラフに添える「すごい」文章力で、Ryzen7のパフォーマンスの良さを伝える必要が出てくる。本当はグラフの中にこそ、その凄さが詰まっているのに。

Webでグラフ描写する「amCharts」の良さ

グラフそのものをWeb上で描写してしまえば、Excelグラフ貼り付けの刑を回避できる。

そんなうってつけなWebグラフサービスがいくらか展開されているが、特におすすめできるのが「amCharts」だ。

JavaScript Charts & Maps - amCharts
JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. Fast and responsive. WordPress plugin available. Developed since 2006.

まずはamChartsで作成した下のグラフを見て欲しい。

エクセルを貼り付けたグラフとは「美しさ」も「情報の豊富さ」も雲泥の差ではないだろうか。

そして、当然レスポンシブ対応でスマホでも同じ見栄えだ。

このようにWeb上でグラフを表示するサービスはいくらかあるが、ここでamChartsをおすすめした訳を紹介したい。

amChartsの特徴
  • 映えるグラフを簡単作成
    ライブエディター機能を利用することで初心者でもグラフ作成ができる
  • 使いまわしができる
    無料登録することで、一度作成したグラフを保存したり再利用ができる
  • 無料でも使える
    帰属明示の小さなクレジットリンク(左上)を掲載すれば無料で使える

この手のWebで描写可能なグラフサービスをいろいろと探してみたものの、無料でこの完成度のグラフが描写できるのは、amChartsがトップクラスだ。

※有料プランであればクレジットを消すことができ、今どき珍しい買い切りライセンスだ。

そして何よりも、Web上でグラフを編集できる「ライブエディター」の作り込みがピカイチだ。

amChartsのライブエディターは英語表記ではあるものの、英語が得意でなくてもそれらしい項目をクリックすれば、すぐにグラフに反映され、どのように描写が変化するか一目でわかる。

amChartsのライブエディターでの編集の様子
amChartsライブエディターでの編集の様子

同様のWebチャートツールのライブエディターは、好きな場所にテキストを置けないなど、痒いところに手が届かないものが多かったのだが、amChartsであれば、ほとんどの編集項目がライブエディター上で実際のグラフを見ながら編集できる。

Webサイトへの適用方法

amChartsのライブエディターでグラフを作成した後、どのように自分のWebサイトへグラフを掲載するかを紹介する。amChartsは、ほんの少しWebの知識さえあれば、簡単に掲載可能だ。

ライブエディター内にある「Save HTML」をクリックすると、以下のようなHTMLが画面上に出力される。

これをHTMLファイルとして、Webサーバーにアップロードすればそのままグラフを描写可能だが、Wordpressに載せる場合はひと工夫必要だ。

<!DOCTYPE html>
  <html>
  <head>
    <title>chart created with amCharts | amCharts</title>
    <meta name="description" content="chart created using amCharts live editor" />

    <!-- STEP① 以下の2行をHeaderに追加する -->
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>

    <!-- STEP② 以下のコードをカスタムJavascriptに追加する -->
    <script type="text/javascript">
      AmCharts.makeChart("chartdiv",
        {
          "type": "serial",
          "categoryField": "category",
          "rotate": true,
          "startDuration": 1,
          "categoryAxis": {
            "gridPosition": "start"
          },
          "trendLines": [],
          "graphs": [
            {
              "balloonText": "[[title]] of [[category]]:[[value]]",
              "fillAlphas": 1,
              "id": "AmGraph-1",
              "title": "graph 1",
              "type": "column",
              "valueField": "column-1"
            }
          ],
          "guides": [],
          "valueAxes": [
            {
              "id": "ValueAxis-1",
              "title": ""
            }
          ],
          "allLabels": [],
          "balloon": {},
          "legend": {
            "enabled": true,
            "useGraphSettings": true
          },
          "titles": [
            {
              "id": "Title-1",
              "size": 15,
              "text": "Chart Title"
            }
          ],
          "dataProvider": [
            {
              "category": "category 1",
              "column-1": 8
            },
            {
              "category": "category 2",
              "column-1": 6
            }
          ]
        }
      );
    </script>
    <!-- ここまで -->
  </head>

  <body>
    <!--STEP③ カスタムHTMLで以下の1行を記事内に追加する-->
    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
  </body>

  </html>

上のソースコード内のコメント、STEP①~③の通りにWordpressの投稿記事へコードを追加すれば良いのだが、Cocoonテーマや「Simple Custom CSS and JS」プラグインを使うとこれらの作業は一瞬で完了する。

CocoonテーマへのamCharts適用例

Cocoonテーマの場合、投稿画面の下部に「カスタムJavascript」と「カスタムフィールド」が追加される。

STEP①

ヘッダー部へのスクリプト追加は、以下のように「head_custom」というカスタムフィールドを追加し、値にSTEP①の2行を指定すれば良い。

カスタムフィールド「head_custom」を追加する

STEP②

カスタムJavascriptへの追加は、その名のとおり、投稿画面に設けられた「カスタムJavascript」へ転記する。

カスタムJavascriptのフォームでは <script type=”text/javascript>~</script> の記載は不要なので、AmCharts.makeChart(“chartdiv”, から書き出せばよい。

カスタムJavascriptへのコード転記

STEP③

最後に1行のHTMLを「カスタムHTML」で記事中に追加する。heightはグラフサイズに応じて適宜変更すると良い。

これで、Web記事の好きな場所にamChartsで作成したグラフを描写できる。

1つの記事に複数のグラフを描写したい場合

前項で説明した要領で、グラフを複数描写させようとすると、1つのグラフしか描写できないはずだ。

1つの投稿記事で複数のグラフを描写させたい場合、次の方法を取る。

まず、STEP②のカスタムJavascriptの関数呼び出しを無名関数とし、グラフ名”chartdiv”を他のグラフと重複しないようにする。

▼カスタムJavascriptの変更後
var Chart1 =AmCharts.makeChart(“chartdiv1“,
{
“type”: “serial”,
“categoryField”: “category”,
“rotate”: true, ~略
}
var Chart2 =AmCharts.makeChart(“chartdiv2“,
{
“type”: “serial”,
“categoryField”: “category”,
“rotate”: true, ~略
}

STEP③のカスタムHTMLでのグラフidを、上記で変更したグラフ名とする

▼カスタムHTMLを以下のように変更
<div id=”chartdiv1” ~><div1> ← 1つ目のグラフ描写
<div id=”chartdiv2” ~><div1> ← 2つ目のグラフ描写

これで、amChartsで作成した複数のグラフを1つの記事に描写できる。

さらにパワフルになった amCharts 4

実は、これまで紹介したライブエディターを使ったグラフ作成は、旧バージョンであるamCharts 3のライブラリを用いたものである。

現行バージョンはamCharts 4となっており、数々のアップデートがなされている。

残念ながら、親しみやすいライブエディターで作成可能なamCharts 3 でのグラフのサポートは2020年までのようだ。

amCharts 4でのグラフ作成方法の紹介は、また次回。

コメント