オンラインでグラフを作るならHighcharts Cloudが簡単便利
オンラインでグラフを作成してSNSでシェアしたり、webサイトやブログに貼りつけたいことってよくありますね。そんなときに使えるのが Highcharts Cloud です。
名前からも分かるように、Highcharts Cloud は、javascript のグラフ描画ライブラリー『highcharts js』 をクラウドで使えるようにしたサービスです。
ベースがhighcharts jsなので、できることも生成されるコードもハイチャートjsと同じものになっています。
Cloud版だとオプションがフォームから設定できるため、パラメーターを覚えたり調べなくてもよく、はじめての人でも簡単に扱えます。
Highcharts Cloud は無料な上に、ログイン不要でグラフを作ることができます。
データの入力はCSV 形式のテーブル（表）ファイルから行います。
ファイルからインポートしたいならCSVファイルをドラッグし、データとして入力したいなら、カンマで区切られた値をコピペします。
たったこれだけでグラフが即座に出来上がります。
作成できるグラフにはレーダーチャートや棒グラフ、折れ線グラフ、円グラフ、さらには株式用ろうそくチャートまで用意されています。
Highcharts Cloud で作成されるグラフは、系列をクリックするとオン・オフが切り替わったり、マウスを頂点に移動させたりタップすると、その地点の数字が表示されるといったインタラクティブなものです。
ラベル名とツールチップ設定を変更しただけのHighcharts Croudグラフ
設定がよくわからなかったり面倒ならそのままでも大丈夫。十分きれいで見やすいグラフが作成されます。
さらにオプションでそのデータに見合ったカスタマイズをすれば、オリジナルな外観のグラフを作ることもできます。
オプションを設定しないデフォルトの状態でも見栄えのいいグラフが生成されるので、試しにグラフ化してみたい時にも使えます。
Highcharts Cloud はこんな人におすすめ
- 簡単にグラフを作りたい
- 人に見てもらいたい
- SNSで共有したい
- WordPress や Tumblr、ブログ、webサイトに埋め込みたい
- Highcharts.jsを使っている人で、オプション設定の使い方を知りたい
難点は英語であることと、データを動的に操作できないことくらいです（インターフェースは英語でも、データに日本語を使うことは可能）。
デフォルトで表示されるグラフの作者名は、設定で消すことが出来ます。
Highcharts Cloudのしくみ
Highcharts Cloud で作成したグラフを Save すると、オリジナルのURLが発行されます。
そのURLをつかうことで、グラフを埋め込んだり、SNSでシェアすることができます。
発行されたグラフは誰でも編集できますが、他の人があとから変更したものはバージョン違いとして扱われるので、オリジナルはそのまま保存されています。
グラフは PNGやjpg、SVGといった画像ファイルでダウンロードすることもできます。
元データを見られたくないなら、画像としてダウンロードして、それを共有するという方法もあります。
会員登録をしていない無料ユーザーでも、公開したあとにグラフを変更することはできます。
しかしバージョン違いになってしう上に、グラフへのアクセスもURLから飛ばなければいけないので不便。
作成したチャートをあとからも変更したければ、会員登録する必要があります。
会員登録にはGoogleアカウントでの認証が使えるので手間はありません。
Highcharts Cloud を使ってみる
こういうのは習うより慣れろなので、とりあえず使ってみましょう。
Highcharts Cloud
⇒https://cloud.highcharts.com/
〔Get Started Now〕で開始。
Highchart Cloud のグラフ作成は4ステップ
Highchart Cloud のグラフ作成は4ステップになっています。
- データ入力
- グラフの種類選択
- グラフタイトルや軸の表示方法といったオプション指定
- セーブして共有・埋め込みコード取得
１．データ入力
データの入力は、CSVファイルを赤枠内にドロップするか、カンマ区切りのテキストをコピペで行います。
Google Sheets の公開データからのインポートは有料版のみの機能なので、無料版でのデータ入力はコピペかCSVファイルのアップロードしかありません。
ここでは最初から最後用意されているsampleデータを利用してみます。
〔Sample datasets〕の sample data をクリックします。
表示されたサンプルデータ、上から2番目の「Categorized, four data columns」をクリックすると、4×12のデータが挿入されます。
右側にグラフが表示されたら、 CONTINUE TO TEMPLATES を選択して進みます。
２．テンプレート選択
テンプレートでは、グラフの種類を選びます。
グラフの種類
- Line charts … 線グラフ
- Area charts … 面グラフ
- Column charts … 縦棒グラフ
- Bar charts … 線グラフ
- scatter and bubble … 棒グラフ
- Pie charts … 円グラフ
- Polar … ポーラチャート
- Stock charts … 株価チャート
- その他
- Combination charts … 複合グラフ
今回はなめらかな線グラフ Line charts の Spline を使ってみます。
Splineを選択したら、下の CONTINUE TO CUSTOMIZE に進みます。
３．カスタマイズ
タイトルやデータのオプションを指定して、カスタマイズをします。
- General … 一般設定
- Appearance … 外観
- Axes … X軸の設定
- Data Series … データ系列
- Legend … 凡例
- Tooltip … マウスオーバーしたときに表示される項目
ここでは Title とTooltip を変更します。
●Title タブではタイトルとY軸の値のラベル（表記）を変更しています。
●Tooltip タブでは、 Shared between serieses にチェックを入れます。
Shared between serieses がオフの状態では、マウスオーバーした時に1つの系列の値しか表示されません。
このままでは他の系列との比較が難しいので、特に理由がなければ Shared between serieses にチェックを入れておくほうがよいでしょう。
設定が終わったら CONTINUE TO SHARE で、次に移動します。
４．シェア
SAVE を押すと保存され、シェア用URL・エンベッド（サイト埋め込み）用コードが生成されます。
SOCIAL なら、該当するアイコンをクリックするだけで投稿できます。
埋め込み用コードには iframe と、非iframe 2種類のコードが生成されます。あとは都合のよいほうを使うだけです。
補足
データ系列
サンプルを見ても分かりますが、1行目は系列の名として自動的に使用されます。
1行目からデータが入っているなら、「1行目をカテゴリー名に使わない」にチェックを入れれば、1行目からグラフに描画されます。
1列目は自動的にX軸の目盛りに使用されます。カテゴリーとして使用せず、データ系列として利用したい場合は、データインポート・コピペ時に Use categorys の項目で設定可能です。
X軸とY軸の入れ替えも、データインポート時に Switch rows and columns にチェックを入れるだけで行えます。
会員登録（ソーシャルログイン）
ログインしていない状態で作成したグラフでをあとから変更することはできません。
正しく表現すると、作成済みのグラフを改変することはできるのですが、別バージョン扱いとなります。したがって、そのグラフを変更しても埋め込み済みのグラフに反映されることがありません。
一方、ログインした状態で作成したグラフは、マイページの一覧に表示されます。そこからEditすれば、元のバージョンに反映されます（エディット中は別バージョンが作成され、Saveするとオリジナルに反映される）。
グラフをサイトなどに埋め込むつもりなら、あとから修正が効くようログインしてから作成に入ることをお勧めします。
クレジット表記とhighchartsサイトへのリンク
Highcharts Cloud の無料版ではクレジットを消すことはできません。
オプションでクレジット表記をオフにしてもキャンセルされます。
ライブラリー版は無料でも消せるんですけどね。
有料版について
有料版へのアップグレードは、ログイン後Billing Informationを入力すると選択できるようになります。
Highcharts Cloud の有料版には月額15ドルと30ドルの2種類のプランがあります。
月15ドルプランでは、右下に表示される Highcharts クレジットリンクを外すことができるようになります。
月額30ドルのプランにすると、公開されている Google Sheets からのインポートができるようになります。ライブラリー版のライセンス価格が410ドルなので、月30ドルならリーズナブルなのかなとも思えます。
まとめ
企業などのグラフ描画に用いられることの多い Highcharts js ですが、設定項目が多いために敷居が高い印象があります。
しかし、Highcharts Cloud なら直感的に変更できるので、敷居の高さはありません。オプションを変更するとリアルタイムでグラフに反映されるので、結果を確認しながら調整することができます。
WordPressならプラグインの Visualizer で似たことができたのですが、少し前のアップデート後にやたら重くなったため、使い勝手が悪くなってしまいました。
Highcharts Cloud を使うと簡単に軽いグラフが生成されるので、プラグインをお探しなら、ぜひ試してみてください。