jQueryグラフ描画ライブラリjqplotで折れ線グラフを描く

はじめに

Webブラウザでグラフを描画するなら、jqPlotというライブラリがオススメです。jqPlotはjQueryのプラグインとして動作するグラフ描画ライブラリで、一言でいって非常に高機能です。多種多様なグラフを表現することができます。

今回は、jqPlotを使って横浜市の人口推移を折れ線グラフにしてみました。

横浜市人口ニュースバックナンバー　No.１０３５（平成24年11月1日現在）

jQueryデザインブック　仕事で絶対に使うプロのテクニック

posted with amazlet at 12.12.02

MdN
売り上げランキング: 17850

Amazon.co.jp で詳細を見る

ライブラリ

jQuery v1.8.3
- jQuery: The Write Less, Do More, JavaScript Library
jqPlot 1.0.4r1121
- jqPlot Charts and Graphs for jQuery

折れ線グラフを描く(HTML)

折れ線グラフを描くのに必要なライブラリは、plugins/jqplot.dateAxisRenderer.min.jsです。
まずはページ内でjqPlotのcssとjsファイルを読み込みます。

<link rel="stylesheet" href="jquery.jqplot.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="jqplot.dateAxisRenderer.min.js"></script>

html内には、グラフを描画するdivエリアを用意しておきます。

<div id="chart1" style="height:300px; width:650px;"></div>

続いて、jqPlotでさきほど用意したグラフ描画領域にグラフを描いていきます。

折れ線グラフを描く(JavaScript)

変数line1はグラフに描画するデータを格納した二次元配列（日付と人口）です。$.jqplot関数の第1引数にグラフ描画領域のid、第2引数にデータを格納した配列を渡します。

axes（軸）というプロパティでグラフの設定を行います。axes配下にはxaxisとyaxisがあって、それぞれx軸（横軸）とy軸（縦軸）の設定を行うことができます。
xaxisでrenderer:$.jqplot.DateAxisRendererという指定をしていますが、これが折れ線グラフで描画するという命令になります。
tickOptionsプロパティのformatStringで年月の表示の仕方を加工しています。この例ではYYYY/MMの形式で表示するよう指定をしています。">*1

<script>
$(document).ready(function(){
  var line1=[['2012-06-01',3697894], ['2012-07-01',3697432], ['2012-08-01',3697426], ['2012-09-01',3697591], ['2012-10-01',3697006], ['2012-11-01',3698828]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'横浜市 月別の人口推移', // グラフタイトル
    axes:{
        // X軸の設定
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
            tickOptions: { formatString: '%Y/%#m'},
            // X軸のラベル
            label: "年月"
        },
        // Y軸の設定
        yaxis:{
          // Y軸のラベル
          label: "人口総数"
        }
    },
    series:[
      // ラベルの指定
      {label: '人口総数'}
    ],
    legend: {
      show: true, // true：表示、false：非表示
    }
  });
});
</script>

実際に上記のHTMLとJavascriptを作成して、ブラウザで表示すると以下のようになります。

サンプルプログラム

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jqPlotによる折れ線グラフ</title>
	<link rel="stylesheet" href="jquery.jqplot.min.css">
</head>
<body>
	<h1>jqPlotによる折れ線グラフ</h1>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="jquery.jqplot.min.js"></script>
	<script src="plugins/jqplot.dateAxisRenderer.min.js"></script>
	<script>
$(document).ready(function(){
  var line1=[['2012-06-01',3697894], ['2012-07-01',3697432], ['2012-08-01',3697426], ['2012-09-01',3697591], ['2012-10-01',3697006], ['2012-11-01',3698828]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'横浜市 月別の人口推移', // グラフタイトル
    axes:{
        // X軸の設定
        xaxis:{
            renderer:$.jqplot.DateAxisRenderer,
            tickOptions: { formatString: '%Y/%#m'},
            label: "年月"
        },
        // Y軸の設定
        yaxis:{
          label: "人口総数"
        }
    },
    series:[
      // ラベルの指定
      {label: '人口総数'}
    ],
    legend: {
      show: true, // // true：表示、false：非表示
    }
  });
});
</script>
<!-- グラフ描画エリア -->
<div id="chart1" style="height:300px; width:650px;"></div>
</body>
</html>