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.barRenderer.min.jsとplugins/jqplot.categoryAxisRenderer.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="plugins/jqplot.barRenderer.min.js"></script>
<script src="plugins/jqplot.categoryAxisRenderer.min.js"></script>

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

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

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

棒グラフを描く(JavaScript)

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

seriesDefaultsプロパティで、renderer:$.jqplot.BarRendererを指定し、xaxisでrenderer:$.jqplot.CategoryAxisRendererを指定することで棒グラフを描画することができます。animateを指定することで、棒グラフがぐいーんと伸びる様子をアニメーションで表現することができます。

<script>
$(document).ready(function(){
  var line1=[['鶴見区',276579], ['神奈川区',233379], ['西区',96965], ['中区',147376], ['南区',195172], ['港南区',218832], ['保土ケ谷区',205217], ['旭区',249794], ['磯子区',162058], ['金沢区',206527], ['港北区',334493], ['緑区',178438], ['青葉区',306907], ['都筑区',207458], ['戸塚区',273858], ['栄区',124254], ['泉区',155490], ['瀬谷区',126031]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'横浜市 区別の人口総数 平成24年11月時点', // グラフタイトル
    animate: !$.jqplot.use_excanvas, // アニメーションを有効
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true }
    },
    axes:{
        // X軸の設定
        xaxis:{
            renderer:$.jqplot.CategoryAxisRenderer,
            label: "区名"
        },
        // Y軸の設定
        yaxis:{
          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.barRenderer.min.js"></script>
  <script src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script>
$(document).ready(function(){
  var line1=[['鶴見区',276579], ['神奈川区',233379], ['西区',96965], ['中区',147376], ['南区',195172], ['港南区',218832], ['保土ケ谷区',205217], ['旭区',249794], ['磯子区',162058], ['金沢区',206527], ['港北区',334493], ['緑区',178438], ['青葉区',306907], ['都筑区',207458], ['戸塚区',273858], ['栄区',124254], ['泉区',155490], ['瀬谷区',126031]];
  var plot1 = $.jqplot('chart1', [line1], {
    title:'横浜市 区別の人口総数 平成24年11月時点', // グラフタイトル
    animate: !$.jqplot.use_excanvas,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      pointLabels: { show: true }
    },
    axes:{
        // X軸の設定
        xaxis:{
            renderer:$.jqplot.CategoryAxisRenderer,
            label: "区名"
        },
        // Y軸の設定
        yaxis:{
          label: "人口総数"
        }
    },
    // 凡例の設定
    series:[{
      // ラベルの指定
      label: '人口総数'
    }],
    legend: {
      show: true, // true：表示、false：非表示
    }
  });
});
</script>
<!-- グラフ描画エリア -->
<div id="chart1" style="height:300px; width:950px;"></div>
</body>
</html>