これまでHighchartsでグラフを描画・カスタマイズする方法を幾つかご紹介しました。
今回は棒グラフ+折れ線グラフを使った複合グラフを作成してみます。
Highchartsの使い方:棒+折れ線の複合グラフを描画する
これまでのHighcharts関連記事はこちら
- [導入編]webページにグラフを美しく描画するJavaScriptライブラリHighcharts
- HighchartsのTooltipをカスタマイズする
- HighchartsのyAxis(y軸)の見栄えを調整する
今回作成する複合グラフの完成イメージ。
グラフの特徴
- 棒グラフと折れ線グラフの複合グラフ
- 両端にy軸目盛線(単位付き)
- 凡例表示
- それぞれのグラフに単位付きのツールチップを表示
調整後のコード全文はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, credits: { enabled: false }, title: { text: '棒グラフと折れ線グラフサンプル' }, subtitle: { text: '' }, xAxis: [{ categories: ['11/1', '11/2', '11/3','11/4','11/5'] }], yAxis: [{ // Primary yAxis min:0, max:200, opposite: true , labels: { formatter: function() { return this.value +'%' } }, title: { text: '右側タイトル', style: { color: '#9f51c0' } } }, { // Secondary yAxis labels: { formatter: function() { return Highcharts.numberFormat(this.value, 0, '', ',') +' 円' } }, title: { text: '左タイトル', style: { color: '#333333' } } }], tooltip: { formatter: function() { var unit = { '●●●費用': '円', '×××比率': '%' }[this.series.name] var valy = { '●●●費用': Highcharts.numberFormat(this.y, 0, '', ','), '×××比率': Highcharts.numberFormat(this.y, 1, '.', ',') }[this.series.name] return ''+ this.x +': '+ valy +' '+unit } }, series: [{ name: '●●●費用', color: '#c4e0ff', type: 'column', yAxis: 1, dataLabels: { enabled: true, color:'#003366', inside: true }, enableMouseTracking: true, //マウストラッキング data: [ 997, 856, 686, 1025,{color:'#65acfc',y:1607}] },{ name: '×××比率', color: '#69a21f', type: 'line', dataLabels: { enabled: true, color:'#003366' }, enableMouseTracking: true, //マウストラッキング data: [ 128.2, 108.2, 69.0, 79.1,108.5], lineWidth: 2 }] }); }); }); |
順番に見ていきます。
タイトル、サブタイトルの表示
12行目。グラフタイトルの指定。表示したくない場合は、シングルクオーテーション内を空白にする。
15行目のサブタイトルも同じ。
横軸(x軸)の設定
18行目。categories:[]の中に記述します。項目間は「,」(カンマ)で区切ります。
縦軸(y軸)の設定
複合グラフの場合、左右それぞれにオプション設定できます。
yAxis:[{//右側の設定},{//左側の設定}]となります。
22行目。目盛の最小値と最大値を設定。
ここを指定しない場合は、自動で目盛が振られますが、中途半端な値になる事もあります。
24行目のoppositeをtrueにする事でy軸のラベルを両側に表示できます。
24 | opposite: true , |
26行目。右側のラベルの表示形式を指定。%表示にしています。
ラベルの表示形式を設定するには、 formatter: function() {}が便利です。
26 27 28 | formatter: function() { return this.value +'%' } |
31行目。右側y軸のタイトル設定。表示させたくない場合は、シングルクォーテーション内を空にします。
このタイトルは文字色やサイズなどのスタイル設定可能で、ここでは紫。
38目から左側の軸の設定。
ラベルの表示はカンマ区切りの円にしています。
小数点や、カンマ区切りを指定する場合、Highcharts.numberFormat()が使えます。
タイトルの指定は、右側と同様。
ツールチップの表示
グラフが2つあるので少し設定が複雑です。
それぞれのツールチップに「項目、数値、単位」を表示させています。
また、棒グラフの方はカンマ区切り、折れ線グラフは小数点1桁表示を指定。
50 51 52 53 54 55 56 57 58 59 60 61 62 63 | tooltip: { formatter: function() { var unit = { '●●●費用': '円', '×××比率': '%' }[this.series.name] var valy = { '●●●費用': Highcharts.numberFormat(this.y, 0, '', ','), '×××比率': Highcharts.numberFormat(this.y, 1, '.', ',') }[this.series.name] return ''+ this.x +': '+ valy +' '+unit } }, |
52行目のver unitで変数を定義。
ここでそれぞれのグラフに対応する単位を指定しています。
series.nameとは後に出てきますが、グラフの名前です。凡例にも同じ名称が表示されます。
series.nameが「●●●費用」の場合は円、「×××比率」の場合は%を指定。
そして57行目で表示形式の指定を行います。費用は金額なので「,」で区切ります。
費用は小数点一桁区切り。
60行目のreturnでTooltipでの表示を返しています。
60 61 | return ''+ this.x +': '+ valy +' '+unit |
seriesで各グラフ毎の設定をする
ツールチップの時に出てきたseries.nameはここで指定しています。
二つグラフがあるので、series: [{ グラフA },{ グラフB }]のようにそれぞれ指定します。
棒グラフの調整
seriesの中の設定項目は以下。
まず、棒グラフから。
棒グラフなので、type:columnとしています。また、x軸最新のデータは色を変えたいので、style設定しています。
66 67 68 69 70 71 72 73 74 75 76 77 78 | series: [{ name: '●●●費用', color: '#c4e0ff', type: 'column', yAxis: 1, data: [ 997, 856, 686, 1025,{name:'売上高' ,color:'#65acfc',y:1607}] },{ name: '×××比率', color: '#69a21f', type: 'line', //折れ線グラフ data: [ 128.2, 108.2, 69.0, 79.1,108.5], lineWidth: 2 }] |
折れ線グラフはtype:lineとして各項目指定します。また、89行目は線の太さを指定しています。
他にも折れ線グラフの1点だけを強調表示したり、破線に変えたりすることもできます。
データラベルを表示する
データラベルを表示させたい場合は、dataLabelsで調整可能です。
二つのグラフの点が近い場合は、文字が重なってしまうので、棒グラフの数値をinside指定すると良いです。
1 2 3 | dataLabels: { inside: true }, |
さらにツールチップを表示させたくない場合は、
1 | enableMouseTracking: false, //マウストラッキング |
を追加。
補足
今回はそれぞれのseriesにオプション設定をしましたが、共通するものはplotOptionsで一括指定する事も可能です。
1 2 3 4 5 6 7 8 | //seriesの共通設定を行う事ができる plotOptions: { line: { dataLabels: { enabled: true //データラベル表示 } } }, |
コメントを残す