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


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


Highcharts:複合グラフ完成形

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

スポンサーリンク

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

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

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

グラフの特徴

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

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

順番に見ていきます。

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

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

横軸(x軸)の設定

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

縦軸(y軸)の設定

複合グラフの場合、左右それぞれにオプション設定できます。
yAxis:[{//右側の設定},{//左側の設定}]となります。
Highcharts:y軸のオプション設定
22行目。目盛の最小値と最大値を設定。
ここを指定しない場合は、自動で目盛が振られますが、中途半端な値になる事もあります。
Highcharts:y軸のオプション設定
24行目のoppositeをtrueにする事でy軸のラベルを両側に表示できます。

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

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

ツールチップの表示

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

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

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

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

棒グラフの調整

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

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

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

データラベルを表示する

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

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

を追加。

補足

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



Be the first to comment

Leave a Reply

Your email address will not be published.


*


CAPTCHA