Highchartsで棒グラフと折れ線グラフの複合グラフを作成する

これまでHighchartsでグラフを描画・カスタマイズする方法を幾つかご紹介しました。
今回は棒グラフ＋折れ線グラフを使った複合グラフを作成してみます。

Highchartsの使い方：棒＋折れ線の複合グラフを描画する

これまでのHighcharts関連記事はこちら

• [導入編]webページにグラフを美しく描画するJavaScriptライブラリHighcharts
• HighchartsのTooltipをカスタマイズする
• HighchartsのyAxis（y軸）の見栄えを調整する

今回作成する複合グラフの完成イメージ。

グラフの特徴

1. 棒グラフと折れ線グラフの複合グラフ
2. 両端にy軸目盛線（単位付き）
3. 凡例表示
4. それぞれのグラフに単位付きのツールチップを表示

調整後のコード全文はこちら

順番に見ていきます。

タイトル、サブタイトルの表示

12行目。グラフタイトルの指定。表示したくない場合は、シングルクオーテーション内を空白にする。
15行目のサブタイトルも同じ。

横軸（x軸）の設定

18行目。categories:[]の中に記述します。項目間は「,」(カンマ)で区切ります。

縦軸（y軸）の設定

• 軸に関する説明：Axes | Highcharts

複合グラフの場合、左右それぞれにオプション設定できます。
yAxis:[{//右側の設定},{//左側の設定}]となります。

22行目。目盛の最小値と最大値を設定。
ここを指定しない場合は、自動で目盛が振られますが、中途半端な値になる事もあります。

24行目のoppositeをtrueにする事でy軸のラベルを両側に表示できます。

26行目。右側のラベルの表示形式を指定。％表示にしています。
ラベルの表示形式を設定するには、 formatter: function() {}が便利です。

31行目。右側y軸のタイトル設定。表示させたくない場合は、シングルクォーテーション内を空にします。
このタイトルは文字色やサイズなどのスタイル設定可能で、ここでは紫。
38目から左側の軸の設定。
ラベルの表示はカンマ区切りの円にしています。
小数点や、カンマ区切りを指定する場合、Highcharts.numberFormat()が使えます。

タイトルの指定は、右側と同様。

ツールチップの表示

• ツールチップ：| Highcharts

グラフが2つあるので少し設定が複雑です。
それぞれのツールチップに「項目、数値、単位」を表示させています。
また、棒グラフの方はカンマ区切り、折れ線グラフは小数点1桁表示を指定。

52行目のver unitで変数を定義。
ここでそれぞれのグラフに対応する単位を指定しています。
series.nameとは後に出てきますが、グラフの名前です。凡例にも同じ名称が表示されます。
series.nameが「●●●費用」の場合は円、「×××比率」の場合は%を指定。
そして57行目で表示形式の指定を行います。費用は金額なので「,」で区切ります。
費用は小数点一桁区切り。
60行目のreturnでTooltipでの表示を返しています。

seriesで各グラフ毎の設定をする

• series：| Highcharts

ツールチップの時に出てきたseries.nameはここで指定しています。
二つグラフがあるので、series: [{ グラフA },{ グラフB }]のようにそれぞれ指定します。

棒グラフの調整

seriesの中の設定項目は以下。

まず、棒グラフから。
棒グラフなので、type:columnとしています。また、x軸最新のデータは色を変えたいので、style設定しています。

折れ線グラフはtype:lineとして各項目指定します。また、89行目は線の太さを指定しています。

他にも折れ線グラフの1点だけを強調表示したり、破線に変えたりすることもできます。

• series：| Highcharts

データラベルを表示する

データラベルを表示させたい場合は、dataLabelsで調整可能です。
二つのグラフの点が近い場合は、文字が重なってしまうので、棒グラフの数値をinside指定すると良いです。

さらにツールチップを表示させたくない場合は、

を追加。

補足

今回はそれぞれのseriesにオプション設定をしましたが、共通するものはplotOptionsで一括指定する事も可能です。