Tweet

HighchartsはJavascriptで実装された、グラフ描画ライブラリです。綺麗なグラフを簡単にブラウザに表示できます。

基本的な使い方は、以下のとおりです。

1. htmlファイル中に、グラフを書きたい要素(element)を用意する
2. HighchartsとjQueryのJavascriptファイルを読み込む
3. JavascriptからHighchartsのAPIを使い、グラフを描画する

以下に、サンプルを記します。

<div id="sample-chart"></div>
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
		      chart = new Highcharts.Chart({ // 以下、chartオブジェクトに渡す引数
						       chart: {
							   renderTo: 'sample-chart', // どの要素にグラフを描画するかを指定
							   type: 'line' // グラフの種類を指定
						       },
						       title: {
							   text: 'タイトル'
						       },
						       subtitle: {
							   text: 'サブタイトル'
						       },
						       xAxis: { // x軸の値を指定
							   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
									'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
						       },
						       yAxis: { // y軸の軸名を指定
							   title: {
							       text: '気温'
							   },
							   plotLines: [{
									   value: 0,
									   width: 1,
									   color: '#808080'
								       }]
						       },
						       tooltip: { // マウスオーバーした際に表示する文書を指定
							   formatter: function() {
							       return '<b>'+ this.series.name +'</b><br/>'+
								   this.x +': '+ this.y +' 度';
							   }
						       },
						       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]
								}]
						   });
		  });
</script>

• 1行目で、グラフを描画したい要素divを用意しています。id属性を指定する必要があります。
• 2行目と3行目は、jQueryとHighchartsを読み込んでいます。
• 4行目以降が、グラフを描画するJavascriptになります。Highcharts.Chart オブジェクトを生成(new)するだけで、グラフが描画されます。ただし、生成の際には、タイトルや、x軸やy軸の値などを指定する必要があります。

上記のサンプルをブラウザで表示すると、以下のようなグラフが描画されます。 細かい使い方は、別途紹介していく予定です。

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