Tweet

Highchartsの文字サイズを変更する方法を紹介します(Highcharts 2.0.5)。

何も文字サイズを指定しない場合、以下のような文字サイズになります。 個人的には、y軸のタイトルや、y軸の目盛の文字のサイズが、少し小さく感じます。

以下に示すグラフは、「タイトル」「サブタイトル」「凡例」「y軸タイトル」「y軸の目盛」「x軸の目盛」の、各文字サイズを設定した例になります。 少し極端な例ですが、文字が見易くなったのではないでしょうか。以下に、このグラフを表示する際の設定例を示します。

var bigchart;
$(document).ready(function() {
		      bigchart = new Highcharts.Chart({
							  chart: {
							      renderTo: 'bigchart',
							      type: 'line'
							  },
							  title: {
							      text: '大きな文字サイズ',
							      style: {
								  fontSize: '24px' // タイトルの文字サイズ
							      }
							  },
							  subtitle: {
							      text: 'サブタイトル',
							      style: {
								  fontSize: '24px' // サブタイトルの文字サイズ
							      }
							  },
							  xAxis: {
							      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
									   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
							      labels: {
								  style: {
								      fontSize: '20px' // x軸の値の文字サイズ
								  }
							      }
							  },
							  yAxis: {
							      title: {
								  text: '気温',
								  style: {
								      fontSize: '24px' // y軸タイトルの文字サイズ
								  }
							      },
							      labels: {
								  style: {
								      fontSize: '20px' // y軸目盛の文字サイズ
								  }
							      },
							      plotLines: [{
									      value: 0,
									      width: 1,
									      color: '#808080'
									  }]
							  },
							  legend: {
							      itemStyle: {
								  fontSize: '20px' // 凡例の文字サイズ
							      }  
							  },
							  series: [{
								       name: '東京',
								       data: [7.0, 6.0, 9.5, 14.5, 15, 13.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6]
								   }, {
								       name: '横浜',
								       data: [5.2, 4.8, 5.7, 10.3, 18.0, 12.0, 14.8, 14.1, 10.1, 14.1, 8.6, 2.5]
								   }]
						      });
		  });

コメントを書いている部分が、文字サイズを設定するプロパティになります。

お問い合わせは sweng.tips@gmail.com まで。