Highchartsで始めるデータビジュアライゼーション入門

アプリの中にグラフやチャートを描く機会は多いです。スマホアプリはもちろんのこと、タブレットアプリのように表示できる領域が大きいと、細かい数字を並べるよりもグラフを使った方が効果的に情報を見せられます。

今回はそんなグラフやチャートを描くのに便利なライブラリHighchartsの使い方を紹介します。

Highchartsの導入方法

Highchartsを使うには、2つの方法があります。

CDNを使う方法
npmを使う方法

1. CDNを使う方法

CDNを使う場合は、HTMLファイルの中で以下のようにscriptタグを記述します。

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

2. npmを使う方法

npmを使う場合は、以下のコマンドをターミナルで実行します。

npm install highcharts --save

折れ線グラフの作成手順

折れ線グラフを作成するには、以下の手順で行います。

HTMLファイルにグラフを表示するための要素を追加する。
JavaScriptでグラフのオプションを設定する。

1. HTMLファイルにグラフを表示するための要素を追加する

以下のようなHTMLを記述します。

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Basic line chart showing trends in a dataset. This chart includes the
    <code>series-label</code> module, which adds a label to each line for
    enhanced readability.
  </p>
</figure>

ここで、<div id="container"></div>の部分がグラフを表示する場所になります。

2. JavaScriptでグラフのオプションを設定する

次に、JavaScriptでグラフのオプションを設定します。例えば、以下のようなコードを書きます。

Highcharts.chart('container', {
  // グラフのオプションを設定する
});

オプションでは、グラフのタイトル、軸ラベル、データなどを設定します。

options はグラフの描画設定ですが、設定できる内容は実に多様です。折れ線グラフの場合は、以下のキーを指定します。

title
グラフのタイトル
subtitle
グラフのサブタイトル
yAxis
縦軸の設定
xAxis
横軸の設定
legend
凡例の設定
plotOptions
グラフのオプション
series
グラフのデータ
responsive
レスポンシブデザインの設定
responsive.rules
レスポンシブデザインのルール
responsive.rules.condition
レスポンシブデザインの条件
responsive.rules.chartOptions
レスポンシブデザインのオプション

以下はその設定例です。

{
    title: {
        text: "U.S Solar Employment Growth",
        align: "left"
    },
    subtitle: {
        text: "By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.",
        align: "left"
    },
    yAxis: {
        title: {
            text: "Number of Employees"
        }
    },
    xAxis: {
        accessibility: {
            rangeDescription: "Range: 2010 to 2020"
        }
    },
    legend: {
        layout: "vertical",
        align: "right",
        verticalAlign: "middle"
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: "Installation & Developers",
        data: [43934, 48656, 65165, 81827, 112143, 142383,
                171533, 165174, 155157, 161454, 154610]
    }, {
        name: "Manufacturing",
        data: [24916, 37941, 29742, 29851, 32490, 30282,
                38121, 36885, 33726, 34243, 31050]
    }, {
        name: "Sales & Distribution",
        data: [11744, 30000, 16005, 19771, 20185, 24377,
                32147, 30912, 29243, 29213, 25663]
    }, {
        name: "Operations & Maintenance",
        data: [null, null, null, null, null, null, null,
                null, 11164, 11218, 10077]
    }, {
        name: "Other",
        data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
                17300, 13053, 11906, 10073]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: "horizontal",
                    align: "center",
                    verticalAlign: "bottom"
                }
            }
        }]
    }
}

マウスオーバーで情報を表示できます。こうしたインタラクティブ性もHighchartsの特徴です。