多くのデータを扱うサイトを運営しているなら、JavaScriptの図表作成ライブラリーなどを利用して、視覚的な表現をしますよね。そうしたライブラリーは多数あるものの、できることに大きな違いはありません。ではどうやって最適なライブラリーを選べば良いのでしょう？
スタイリッシュで、なおかつ簡単に実装できるAnyChartを実例つきで10個紹介します。AnyChartによるデータの視覚表現の秀逸さ、どんなデータ形式でも扱える使いやすさを実感してください。
紹介する実例はすべてCodePenのAnyChart実例集で確認できます。
AnyChartが群を抜いて優れている理由
AnyChartがほかのチャート作成ツールと比較して優れている理由には、以下のポイントが挙げられます。宣伝ではなく、純然たる事実です。
AnyChartは成熟したライブラリーである
AnyChartは有償のライブラリーですが、商業利用でなければ無料で使えます。登場から10年以上が経ち熟成が進んでいます。もともとはFlashベースでしたが、SVG/VMLのレンダリングを備えた純粋なJavaScriptベースに移行しました。
AnyChart APIはとても柔軟で、実行時にグラフのどの部分も適宜変更できます。
AnyChartは一連のシリーズ製品である
AnyChartは、複数のJavaScript図表作成ライブラリーからなるセット、いわばシリーズ製品です。次のパーツで構成されています。
- AnyChart：基本的なチャート作成に使用
- AnyStock：数量もしくは時間量の大きなデータの視覚化に使用
- AnyMap：地形図や座席表に使用
- AnyGantt：プロジェクトの計画やリソースマネジメントに使用（例：ガントチャートやPERT図など）
こうした複数のライブラリー群も、単一の大きなJavaScript（HTML5）の図表作成ライブラリーのように扱えます。同一のAPIを共有し、どのチャートの作成方法もほぼ同じで、テーマ、設定、データ読み込みの方法も共通です。
AnyChartはオープンソースである
AnyChartは2017年初頭、ライブラリーのソースコードをオープン化しました。ただし、pacheやMITのようなライセンスは導入していないため、完全なオープンソースではありません。それでもなお、長期プロジェクトで使用するライブラリーを探しているならオープン化は良い知らせです。またAnyChartの描画エンジンはAnyChartが管理している完全なオープンソースのJavaScriptライブラリーGraphicsJSです。どんなコミュニティでも要望して改変できます。GraphicsJSについてはたった50行でゲームも作れる！SVG描画ライブラリーの新顔GraphicsJSが登場で学べます。
筆者はAnyChartの研究開発リーダーなので、その気になれば一日中このライブラリーについて語れるのですが、そろそろ本題に入ります。
立ち上げ：AnyChartを開始する
サイトでAnyChartを使い始める手順は、たった3つです。最初の2つはライブラリーのJavaScriptファイルへのリンクを加えることと、必要なHTML要素のブロックを追加することです。以下はサンプルHTMLのテンプレートです。
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
html, body, #container {
width: 100%;
height: 100%;
}
</style>
<title>AnyChart Basic Example</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<script>
// AnyChart code here
</script>
</body>
</html>3つ目の手順はJavaScriptのコードを加えることです。1系統のデータのみから成る単純なチャートを作成します。
anychart.onDocumentLoad(function() {
// create chart and set data
var chart = anychart.column([
["Winter", 2],
["Spring", 7],
["Summer", 6],
["Fall", 10]
]);
// set chart title
chart.title("AnyChart Basic Sample");
// set chart container and draw
chart.container("container").draw();
});必要な作業はこれだけです。
簡単でしょう？ データの指定はさらに簡単で柔軟です。次章で詳しく解説します。
AnyChartにデータを読み込ませる
AnyChartのすばらしさは数多くのデータ形式が使える点です。データ形式は、仕事の内容や自分の好みで選択しますが、AnyChartの柔軟さは、ほぼどんなプロジェクトにも対応します。
配列の配列
最初の方法は、前章の立ち上げ：AnyChartを開始するで目にしています。この手法では、対象のデータを「配列の配列」として宣言して、あとはAnyChartに任せます。簡潔で形式を指定するのも容易です。
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Arrays
var chart = anychart.pie([
["Peter", 5],
["John", 7],
["James", 9],
["Jacob", 12]
]);
chart.title("AnyChart: Array of Arrays");
chart.container("container").draw();
});グラフタイプの変更は単に呼び出すメソッドをanychart.column()からanychart.pie()に変更するだけです。記事内ではさまざまなタイプのグラフを紹介しますが、すべてのタイプはチャートのタイプと組み合わせを参照してください。
オブジェクトの配列
2つ目の方法は1つ目と似ていて、データをオブジェクトの配列にします。配列の配列ほどコンパクトになりませんが、形式を整えるのも読んで理解するのも簡単です。加えてグラフ上の各点の設定ができます。ほかの方法でも可能ですが、マッピングが必要になります。
注：オブジェクト内のデータを使う際は、項目名と値のフィールドに適切な名前を使用してください。詳しくはAnyChart公式ドキュメントの各グラフ（および系列）のタイプを参照してください。多くの場合項目名にはx、値にはvalueフィールドを使います。
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Objects
// the biggest point is marked with individually conigured marker
var chart = anychart.line([
{x: "Winter", value: 5},
{x: "Spring", value: 9, marker: {enabled: true, type: "star5", fill: "Gold"}},
{x: "Summer", value: 7},
{x: "Fall", value: 1}
]);
chart.title("AnyChart: Array of Objects");
chart.container("container").draw();
});複数のデータ系列を持つグラフを作る
複数データ系列を持つグラフは、高低をプロットして比較できます。AnyChartで複数データ系列のグラフを作成するには、前章で紹介した「配列の配列」と「オブジェクトの配列」を使えますが、さらにデータ系列の名前を指定します。そのほかはAnyChartエンジンに任せて大丈夫です。
複数データ系列：配列の配列
以下は単純な配列でグラフを作成する方法です。
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Arrays
var chart = anychart.line()
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
["Winter", 5, 7, 4],
["Spring", 7, 9, 6],
["Summer", 9, 12, 8],
["Fall", 12, 15, 9]
]});
chart.title("AnyChart: Multi-Series Array of Arrays");
chart.legend(true);
chart.container("container").draw();
});CodePenに基本的なAnyChartの複数データ系列グラフ：配列の配列を用いたサンプルを掲載しています。
複数データ系列：オブジェクトの配列
複数のデータ系列のグラフを、オブジェクトの配列を使って作成する方法します。
注：オブジェクトを使用する場合は、値に対して任意のフィールド名（キー）を使用できます。
具体的なコードです。
anychart.onDocumentLoad(function() {
// create chart and set data
// as Array of Objects
var chart = anychart.column();
chart.data({header: ["#", "Euro (€)", "USD ($)", "Pound (£)"],
rows:[
{x: "Winter", usd: 5, eur: 4, pound: 3},
{x: "Spring", usd: 3, eur: 3, pound: 3},
{x: "Summer", usd: 2, eur: 5, pound: 3},
{x: "Fall", usd: 4, eur: 2, pound: 3}
]});
chart.title("Array of Objects");
chart.legend(true);
chart.container("container").draw();
});HTMLのテーブルからデータを取得する
AnyChartでデータを読み込むもう1つの方法は、ページ上にすでにあるテーブル（表）を使う方法です。無味乾燥な数字の羅列になりかねない重要指標を分かりやすく表現するには最高の方法でしょう。図表作成ライブラリーとデータアダプタースクリプトを読み込みます。
選択肢は2つで、<table>タグで作ったテーブルか、<div>タグとCSSで作った表からデータを引っ張ってきます。
テーブルタグで表示したデータを使う
tableタグを使う場合、コードは以下の通りです。
<table id="htmlTable">
<!-- Normal table markup here -->
</table>
<!-- Include the AnyChart library and data adapter -->
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>以下のJavaScriptが必要です。
anychart.onDocumentLoad(function() {
// create chart and set data
var chart = anychart.column();
// parse table
var tableData = anychart.data.parseHtmlTable("#htmlTable");
chart.data(tableData);
chart.legend(true);
// set chart container and draw
chart.container("container").draw();
});実際の見え方です。なかなか良いですよね。
通常のマークアップで表示しているデータを使う
<div>タグとCSSで表を作っている場合です。
<div class="table">
<div class="heading">
<div class="cell">
<p>Date</p>
</div>
...
</div>
<div class="row">
<div class="cell">
<p>01/01</p>
</div>
...
</div>
</div>
<!-- Include the AnyChart library and data adapter -->
<script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>次のJavaScriptが必要です。
anychart.onDocumentLoad(function() {
// create a chart and set the data
var chart = anychart.column();
var tableData = anychart.data.parseHtmlTable(
".table", ".row", ".cell p", ".heading .cell p", ".title"
);
chart.data(tableData);
chart.legend(true);
// set chart container and draw
chart.container("container").draw();
});CSSのセレクタをテーブルの行、見出し行、タイトルとして使えます。基本的にテーブルを改変しなくても大丈夫です。スクリプトを変更してページ上のデータを取得します。
JSONデータを使う
AnyChartのグラフは純粋なJSON形式のデータも問題なく扱えます。むしろAnyChartにJSON形式はぴったりで、独自のJSONスキーマを提供しているほどです。
たとえば設定と値を結びつけて保存する用途に最適です。AnyChartではデータをエクスポートしやすいようにいくつものシリアライゼーション（通信、保存に適した形式への変換）方法を用意しています。
以下はJSONデータから柱と線を組み合わせたグラフを作成する方法です。以降の例では、先に述べたデータアダプタースクリプトが必要です。
anychart.onDocumentReady(function() {
// JSON data
var json = {
"chart": {
"type": "column",
"title": "AnyChart: Data from JSON",
"series": [{
"seriesType": "Spline",
"data": [
{"x": "P1", "value": "128.14"},
{"x": "P2", "value": "112.61"},
{"x": "P3", "value": "163.21"},
{"x": "P4", "value": "229.98"},
{"x": "P5", "value": "90.54"}
]
},
{
"seriesType": "Column",
"data": [
{"x": "P1", "value": "90.54"},
{"x": "P2", "value": "104.19"},
{"x": "P3", "value": "150.67"},
{"x": "P4", "value": "120.43"},
{"x": "P5", "value": "200.34"}
]
}],
"container": "container"
}
};
// set JSON data
chart = anychart.fromJson(json);
// draw chart
chart.draw();
});XMLのデータを使う
AnyChartはXMLに含まれたデータも問題なく扱えるので、JSONが嫌ならXMLを使えます。JSONと同様、独自のXMLスキーマも提供しています。XMLもまた、設定と値を一緒に保存するような用途に最適です。同様に、エクスポートしやすいよういくつものシリアライゼーション方法が用意されています。
複数のデータ系列を持つレーダーチャートを作るサンプルコードです。
anychart.onDocumentReady(function() {
// XML settings and data
var xml = '<?xml version="1.0" encoding="utf-8"?>' +
'<anychart xmlns="https://cdn.anychart.com/schemas/latest/xml-schema.xsd">' +
'<chart type="polar" container="container">' +
'<series_list>'+
'<series series_type="area">' +
'<data>' +
'<point x="0" value="0"/>'+
'<point x="50" value="100"/>'+
'<point x="100" value="0"/>'+
'</data>'+
'</series>'+
'<series series_type="line" stroke="red">' +
'<data>' +
'<point x="50" value="0"/>'+
'<point x="100" value="100"/>'+
'<point x="50" value="0"/>'+
'</data>'+
'</series>'+
'</series_list>'+
'<x_scale maximum="100"/>'+
'</chart>'+
'</anychart>';
// Set settings and data as XML
chart = anychart.fromXml(xml);
// draw chart
chart.draw();
});CodePenのAnyChart XML設定サンプルを確認してください。
CSV形式のデータを使う
最後にCSV形式（カンマで区切って並べられたデータ）を扱います。AnyChartは最初からCSV形式に対応していて、いくつか設定オプション（区切り文字の指定など）を用意しています。CSVは広く普及しているデータ形式です。大量のデータを扱うのに適していて、データ量も抑えられます。CSVからデータを読み込み、配置してグラフに表示できます。
CSVファイルのデータをAnyChartのJavaScriptグラフに読み込む一番簡単な方法は「カンマ区切りで、最初の列が引数名かつ、見出し行がないケース」です。つまり以下のようなデータです。
Eyeshadows,249980
Eyeliner,213210
Eyebrow pencil,170670
Nail polish,143760
Pomade,128000
Lip gloss,110430
Mascara,102610
Foundation,94190
Rouge,80540
Powder,53540こうしたCSVファイルのデータ読み込みは以下のとおり簡単です。
anychart.onDocumentReady(function () {
anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (data) {
// create chart from loaded data
chart = anychart.bar(data);
// set title
chart.title("AnyChart from CSV File");
// draw chart
chart.container("container").draw();
});
});実例としてCodePenにAnyChartでCSVを読み込むサンプルを用意しました。
使用するCSVファイルのデータ配置が異なっているなら、ファイルにいったん読み込んで再配置します。今後の記事で、さらに進んだAnyChartライブラリーの使い方と一緒に紹介したいと思います。ファイルからデータを読み込む際の区切り文字を細かく指定できます。
最後に
JavaScript図表制作ライブラリー「AnyChart」の長所と、複雑で魅力的な外観のグラフでもわずか数行のコードで簡単に作れてしまうパワーをお伝えできたと思います。さらに、固定された単純なデータ構造からネットワーク経由で取得する複雑なデータ構造まで、AnyChartでデータを扱うための何通りもの方法を紹介しました。
役に立つ参考文献のリンク
- AnyChartの公式サイト
- AnyChartの公式ドキュメント
- AnyChart API
- AnyChartプレイグラウンド（ギャラリー）
- GraphicsJS公式サイト
- たった50行でゲームも作れる！SVG描画ライブラリーの新顔GraphicsJSが登場
（原文：Getting Started with AnyChart — 10 Practical Examples）
［翻訳：西尾 健史／編集：Livit］
