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

Other
2021.09.05

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

スポンサーリンク

今回作るもの

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

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

ディレクトリ構成

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の指定を変えることで曲線グラフと棒グラフ以外でも可能です。

余談

ちなみに、こちらの公式の demo を参考にしつつ調べました。
（見た目もほぼ同じです。）

何か作りたいチャートがある場合は、一度 demoページ を見て参考になるものがないか調べてからやってみるのが効率が良いと思いました。

関連記事

とりあえずチャートを表示する方法については知りたい方は、こちらを読んでみてください。

Highchartsでグラフを表示させるところまでやってみた
TMLやCSS、JavaScriptはあまり経験がないのですが、JavaScriptのHighchartsライブラリを使って「資産推移チャートプログラム」を作りました。このとき学んだことを書いていきます。 Highchartsとは High
toronavi.com