Highcharts.jsでドーナツグラフを表示させたい！ーその１.まずは使い方

JavaScript

2017.02.08

『GUNDAM VERSUS』βテストに向けてPS4用のRAP（リアルアーケードプロ）を購入しようか迷い中の kouraku です。約1万5000円チョイのモノを狙っていますが、嫁に「無駄遣いしないようにね！」と自分から言っておきながらこんなものを買ったら何を言われるか想像できるので、今からドキドキが止まりません。

さて今回は、最近とある案件で触ってみた Highcharts.js について書いてみたいと思います。凝ったグラフを作成するのに便利なライブラリなのですが、使うとなるとこれがなかなか、設定が多すぎて取っ付きにくいものでした。なので、忘れないうちにどんなことをしたら目的のグラフが作れるか、をメモしておきたいと思います。

【この記事で必要な知識】

HTML/CSS
JavaScript
jQuery

今回の目標

作りたいグラフは、下図のようなドーナツグラフで、進捗度合いを表示させたいのです。

これを目標に進めていきます。

Highcharts.jsをプロジェクトで使用する前に・・・

Highcharts.jsの公式はこちらです。

公式ページを確認すると、まず目に留まるのが「VIEW DEMO」と・・・
その隣にある「Get a license」の文字です。

・・・ん？「Get」・・・？

そうなんです、実はこのライブラリ、「商用または政府のウェブサイト、イントラネットまたはプロジェクトを実行する場合」はライセンスを購入する必要があります。よって、プロジェクトで使用する場合は要注意です。1件で USD 410 と決して安くはないので、利用する際は予算を見て選ぶ必要があります。

①highcharts.jsを読み込む

商用でなければ特に利用については問題ないので、ライセンスの件は置いといて話を進めます。

Highcharts.jsを使うためには、まずはライブラリをダウンロードしましょう。
「Download」のページからダウンロードや、CDNの利用方法など確認できます。必要な機能だけを選択してダウンロードすることも可能です。

次に、Highcharts.jsのライブラリを読み込ませるために、「Installation」のページを参考に記述します。基本的には、「highcharts.js」だけで問題ないようです。

<script src="http://code.highcharts.com/highcharts.js"></script>

CDNを利用するのであれば、こんな感じですね。

②HTMLを準備する

「Your First Chart」のページを参考（パクリ）に記述します。

<div id="container"></div>

③JSで表示させたいグラフを設定する

先ほどのページを参考（丸パクリ）に、こちらも記述します。

$(function () { 
  var myChart = Highcharts.chart('container', {
    chart: {
      // どんなタイプのグラフを表示させるか
      type: 'bar'
    },
    title: {
      // グラフのタイトル
      text: 'Fruit Consumption'
    },
    xAxis: {
      // グラフ化させるカテゴリを配列で指定
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        // Y軸に対するタイトル
        text: 'Fruit eaten'
      }
    },
    // 表示させるデータ。
    // ここでは Jane と Johnのフルーツを食べた数値をそれぞれ設定。
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  });
});

とりあえず、これをこのまま実行させると以下のような結果が表示されます。

なるほど、ここまでの使い方は簡単そうですね。JSの記述も見た感じそう難しくはありません。