<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/01/datamatic.png" alt="" width="592" height="308" class="alignnone size-full wp-image-30796" /></p>
<p>グラフを手軽に作成して画像にしたり、そのままサイトに埋め込んだりできるフリーのサービスは多くありますが、ちょっと変わったグラフを使いたいとなると、その数は限られてしまいますよね。</p>
<p>今回ご紹介するサービスは、無料で26種類、有料版も合わせるとなんと74種類もの豊富なグラフを作成できるサービスです。</p>
<!--more-->

<h3 class="header-label">あらゆる種類のグラフを作成できる「Datamatic」</h3>
<p>「<a target="_blank" href="http://datamatic.io/">Datamatic</a>」は、少し変わった表現のグラフを作成できるサービス。</p>
<p>Googleスプレッドシートなどでは表現しづらい視覚化をおこないたいときに便利です。</p>

<h4 class='tips'>作成したグラフの例</h4>
<iframe src="https://cdn.datamatic.io/runtime/echarts/3.4.0_109/embedded/index.html#id=104198991348267889378/0B3vqpQISkWN-dnlSQ2dOVXJWTHc" frameborder="0" width="594" height="644" allowtransparency="true"></iframe>
<p>こちらは主要エリア別にタブで整理した訪日客数の推移グラフです。デフォルトのグラフは総計を表示し、各タブでアジア、ヨーロッパ、北米、オセアニアの小計をグラフにしています。</p>


<h4 class='tips'>無料で26種類のグラフを作成できる</h4>
[caption id="attachment_30795" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/01/datamatic-26-graphs.png" alt="" width="592" height="373" class="size-full wp-image-30795" /> タブで複数表示できる縦棒、横棒グラフや散布図、ドーナツグラフなど。[/caption]
<p>すべてのグラフ（74種類）を使えるようにするには月額10ユーロ（約1,200円）以上のプランにする必要がありますが、無料でも26種類のグラフを使えます。</p>
<h5 class='tips'>主なグラフの種類</h5>
<ul><li>縦、横棒グラフ（タブで複数のグラフを表示できるものあり）</li><li>エリア別のマップチャート</li><li>散布図（バリエーション複数あり）</li><li>円グラフ</li><li>ドーナツグラフ</li><li>進捗グラフ</li><li>エリアチャート（単一、複数、タブで複数のグラフを表示できるものあり ）</li><li>折れ線グラフ（単一、複数、タブで複数のグラフを表示できるものあり ）</li><li>ツリーマップ</li><li>ファネル</li></ul>
<p>ここでは主なものを挙げましたが、ベーシックなグラフでちょっと変わった表現をしたいときにも対応できます。</p>

<h4 class='tips'>編集画面でプレビューしながらグラフ作成</h4>
[caption id="attachment_30794" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/01/datamatic-graph-edit.png" alt="" width="592" height="306" class="size-full wp-image-30794" /> 3ペイン表示のグラフ編集画面。[/caption]
<p>グラフの編集画面では、3ペイン表示でデータとグラフの見栄えを、プレビューで確認しながら作成することができます。</p>
<p>右側のグラフプロパティ設定では、かなり詳細までこだわってグラフの見栄えを調整することが可能です。</p>
<p>また、左側のデータ入力部分はエクセルやGoogleスプレッドシートと同じような使い勝手で、グラフの色味の設定もセルで色を指定することでできるようになっています。</p>

<h4 class="tips">複数の手段から選べるグラフの埋め込み方法</h4>
<p>グラフをサイトに表示させるときは、いくつかの選択肢から手段を選ぶことができます。</p>

[caption id="attachment_30793" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/01/datamatic-graph-embed.png" alt="" width="592" height="255" class="size-full wp-image-30793" /> iframeの埋め込みタグ発行。[/caption]
<p>１つめの手段はiframeでの埋め込み。もっとも楽な方法で、かつグラフに変更を加えてもそのまま反映されるのが便利ですね。</p>

[caption id="attachment_30792" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/01/datamatic-graph-api.png" alt="" width="592" height="248" class="size-full wp-image-30792" /> JavascriptとAPIを使ったグラフの呼び出しタグ発行。[/caption]
<p>２つめはiframeを使わずにJavascriptを使ってグラフを呼び出すもの。表示させたい場所にScriptのタグを設置します。</p>
<p>こちらはJavascriptのタグにデータの数値がすべて入っているので、Datamaticの画面に行くことなく、Javascriptタグ内の数値を変更することでグラフを編集できるようになります。</p>

[caption id="attachment_30791" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2017/01/datamatic-graph-png.png" alt="" width="592" height="341" class="size-full wp-image-30791" /> グラフを画像でエクスポート。[/caption]
<p>３つめの手段は画像。グラフを編集すると都度差し替える必要がでてしまいますが、もっとも軽量なグラフの表示を実現できるものです。</p>
<p>頻繁にグラフを編集しないのであれば画像を使うのが良いかもしれませんね。</p>

<p>興味がある方は<a target="_blank" href="http://datamatic.io/">Datamatic</a>へどうぞ。</p>
