Japanese style web design いろはクロス
前回の記事でHighchartsの導入方法を解説しました。
Highchartsは対応グラフの種類が多く、カスタマイズの幅も広いです。
今回はHighchartsの使い方講座として、yAxis(y軸)のカスタマイズ方法をまとめました。
Highcharts使い方：縦軸を調整する方法
Highchartsの導入方法と棒グラフの表示についてはこちらの記事にまとめてあります。
今回も同じ棒グラフを使ってカスタマイズしてみます。
こちらはカスタマイズに使うデモグラフのコード全文。y軸の指定は21行目からのyAxisです。
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 | <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, credits: { enabled: false }, title: { text: 'サンプルグラフ1' }, subtitle: { text: 'サンプルサブタイトル1' }, xAxis: [{ categories: ['2011年度', '2012年度', '2013年度','2014年度','2015年度','2016年度'] }], yAxis: { min:0, //y軸最小値 max:150, //y軸最大値 title: { text: '' } }, legend:{ enabled:false //凡例の表示 }, plotOptions: { column: { stacking:'normal', dataLabels: { enabled:true, color:'#ffffff' } } }, series: [ //seriesの個別オプションを指定 { type: 'column', name: '', color: '#c4e0ff', data: [100.0, 111.0, 103.1,116.5, 116.8,{color:'#65acfc', y:120.0}], dataLabels: { enabled:true, color: '#000000' } }] }); }); }); </script> |
y軸のタイトルを表示させる
こちらは簡単です。デモのコードに24行目。title:の箇所に任意の名称を指定します。
24 25 26 | title: { text: 'y軸のタイトル' } |
labelsの設定
labelsではy軸のラベル設定を行う事ができます。単位や小数点の有無を指定等。
yAxis:{}のカッコの中に記述してください。また、項目を区切るカンマの有無を間違えると表示されません。
以下yAxisにlabelsを追加したコード。
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | yAxis: { min:0, //y軸最小値 max:150, //y軸最大値 title: { text: 'y軸のタイトル' }, labels: { ] allowDecimals: true, formatter: function() { return Highcharts.numberFormat(this.value, 1, '.', ',') +'%' }, style: { color: '#1d2088' } } }, |
28行目では小数点刻みを許可しています。
29行目で、小数点一桁＋％表示を指定。
デフォルトでは110などキリの良い数字は、小数点一桁切り捨てとなります。110.0のように表示したい場合はformatter:function()で指定します。
他にも金額表示にも対応できます。区切り文字「,」を指定しています。
1 2 3 | formatter: function() { return Highcharts.numberFormat(this.value, 0, ',', ',') +'円' }, |
32行目ではy軸の文字色を設定しています。
少し分かり辛いですが紺色です。
複合グラフを作成するときは、右側にもメモリを表示させることができます。
グラフの見栄え調整は大切なので、是非活用して下さい！
その他の関連記事
highchartsカスタマイズ記事たくさんあります。
- [導入編]webページにグラフを美しく描画するJavaScriptライブラリHighcharts
- HighchartsのTooltipをカスタマイズする
- HighchartsのyAxis（y軸）の見栄えを調整する
- Highchartsで棒グラフと折れ線グラフの複合グラフを作成する
- [Highcharts]棒グラフの太さはpointWidthで調整できる
- [Highcharts]グラフの目盛り間隔はtickIntervalで調整しよう
- [Highcharts]パーセンテージで描画する円グラフを描く方法
- [Highcharts]複数の折れ線グラフが接近しすぎている時に、データラベルを調節する方法
- [Highcharts]ゼロじゃなくて！データが無い項目はnullを入れよう
コメントを残す