Highchartsで別種類のチャートを同時に表示する方法

Highchartsでは複数種類のグラフを同時に表示させることができます。
この記事では、曲線グラフと棒グラフの2種類のグラフを同時に表示させる方法について書いていきます。

今回作るもの
ディレクトリ構成
ソースコード
1. index.html
2. chart.js
ソースコードの解説
1. chart.jsの大事なポイント
余談
関連記事

今回作るもの

今回は「１年間の体重推移と増減を表示させる」という想定で、曲線グラフと棒グラフを表示させるところまでを簡単に説明します。
完成するとこのようになります。

実際に動きを見たい方はこちら。

ディレクトリ構成

sample-chart/
├─ index.html ........ チャート画面用HTML
└─  js/ ................... JavaScript格納ディレクトリ
        └─ chart.js ..... チャート表示用JavaScript

ソースコード

以下にソースコードを載せます。
これらは、各種ファイルにコピペすればすぐに動作が確認できると思います。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>サンプルチャート</title>
    <!-- Highchartsを使うにはjQueryが必要なので読み込み -->
    <!-- GoogleがホストするjQuery refs: https://developers.google.com/speed/libraries/#jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Highchartsを読み込み -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- 独自のjsファイルを読み込み -->
    <script type="text/javascript" src="./js/chart.js"></script>
</head>

<body>
    <div id="chart"></div>
</body>

</html>

chart.js

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    title: {
      text: '１年間の体重推移'
    },
    subtitle: {
      text: '2020年版',
    },
    xAxis: {
      title: {
        text: '日付'
      },
      categories: ['1/1', '2/1', '3/1', '4/1', '5/1', '6/1', '7/1', '8/1', '9/1', '10/1', '11/1', '12/1']
    },
    yAxis: [{
      title: {
        text: '体重'
      }
    }, {
      title: {
        text: '体重増減'
      },
      opposite: true
    }],
    tooltip: {
      valueSuffix: 'Kg'
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      x: 80,
      verticalAlign: 'top',
      y: 50,
      floating: true,
    },
    series: [
      {
        type: "column",
        name: '体重増減',
        yAxis: 1,
        data: [0, 3.4, 4.8, 0.8, -1.2, -4.6, -1.1, -1.6, -1.4, -0.8, 0.8, 0.9]
      }, {
        type: "",
        name: '体重推移',
        data: [50.0, 53.4, 58.2, 59.0, 57.8, 53.2, 52.1, 50.5, 49.1, 48.3, 49.1, 50.0]
      }]
  });
});

ソースコードの解説

chart.jsの大事なポイントを解説していきます。

chart.jsの大事なポイント

yAxis
yAxisを配列で定義し、「体重」と「体重増減」の2つの縦軸のタイトルを設定します。
「体重増減」の要素1に対してoppositeをtrueで設定します。
このようにすることで、縦軸のタイトルをグラフの右側に表示することができます。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    ... 略 ...
    yAxis: [{
      title: {
        text: '体重'
      }
    }, {
      title: {
        text: '体重増減'
      },
      opposite: true
    }],
    ... 略 ...
  });
});

series
seriesを配列で定義し、それぞれの要素にtypeを設定します。
columnが棒グラフでsplineが曲線です。
このようにすることで、異なった種類のチャートを同時に表示することができます。

そして、seriesオプション内のyAxisに、先程のyAxisオプションで設定した要素番号を設定することで縦軸を設定します。
「体重増減」の要素番号は1なので、yAxisに1を指定します。
「体重推移」はyAxisを指定をしない、もしくはyAxisに0を指定します。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    ... 略 ...
    series: [
      {
        type: 'column',
        name: '体重増減',
        yAxis: 1,
        data: [0, 3.4, 4.8, 0.8, -1.2, -4.6, -1.1, -1.6, -1.4, -0.8, 0.8, 0.9]
      }, {
        type: '',
        name: '体重推移',
        data: [50.0, 53.4, 58.2, 59.0, 57.8, 53.2, 52.1, 50.5, 49.1, 48.3, 49.1, 50.0]
      }]
  });
});

以上で、異なる種類のチャートを表示することができます。
typeの指定を変えることで曲線グラフと棒グラフ以外でも可能です。