このページの本文へ

たった数行で既存のテーブルからグラフを描ける「AnyChart」の使い方

2017年06月12日　18時58分更新

文●Roman Lubushkin

  • この記事をはてなブックマークに追加
本文印刷
XMLやJSON、既存のページ内のtable要素など、あらゆるデータからグラフを作成できるJavaScriptライブラリー「AnyChart」。その魅力と使い方を解説します。

多くのデータを扱うサイトを運営しているなら、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でデータを扱うための何通りもの方法を紹介しました。

役に立つ参考文献のリンク

（原文：Getting Started with AnyChart — 10 Practical Examples）

［翻訳：西尾 健史／編集：Livit］

Web Professionalトップへ

WebProfessional 新着記事

ウェブサイトが遅く感じる時間は5秒未満が最多　BIGLOBE調べ

WebPro

ウェブサイトが遅く感じる時間は5秒未満が最多　BIGLOBE調べ

BIGLOBEは「インターネット利用に関する意識調査」結果の第3弾を発表した。「ウェブサイトの表示が遅く、ストレスを感じる時間」の質問では、5秒未満と回答した人の割合は4割弱という。

  • 0
  • 0
Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に

WebPro

Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に

Shopify Japanはとヤマト運輸は3月下旬より、荷物の円滑な配送や受け取りを実現する新サービスの提供を開始する。

  • 0
  • 0
Wix.com、ウェブデザインのアイデア25選を公開

WebPro

Wix.com、ウェブデザインのアイデア25選を公開

Wix.comは1月22日、ウェブデザインのアイデア25選を公開した。

  • 0
  • 0
KUSANAGI 9、高速化機能などを利用できるNginx環境を提供

サーバー・ストレージ

KUSANAGI 9、高速化機能などを利用できるNginx環境を提供

プライム・ストラテジーは仮想マシンイメージ「KUSANAGI 9」にてApache httpd環境でNginxの機能を簡単に利用できる「Apache httpd behind Nginx」の提供を開始した。

  • 0
  • 0
さくらのレンタルサーバ向けウェブサイト脆弱性診断「WebSiteScan」

WebPro

さくらのレンタルサーバ向けウェブサイト脆弱性診断「WebSiteScan」

ホスティングサービス「さくらのレンタルサーバ」向けのウェブアプリケーション脆弱性診断サービス「WebSiteScan」を提供開始。

  • 0
  • 0
ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス　「RFPビルダー」

WebPro

ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス　「RFPビルダー」

ソニーネットワークコミュニケーションズは11月7日、ウェブサイト向けRFP（提案依頼書）作成支援サービス「RFPビルダー」を提供開始した。

  • 0
  • 0
すぐに役立つ！プロの解説記事
一覧へ
ASCII.jp Web Professional