ホーム > カテゴリ > HTML5・JavaScript >

棒グラフ、円グラフ、折れ線グラフなどのチャートを表示する[Chart.jsの使い方]

オープンソースの「Chart.js」(v2.3.0)を使用してJavaScriptで棒グラフ,円グラフ、折れ線グラフなどのチャートを表示する方法です。

Chart.js

Chart.jsはMITライセンスのオープンソースです。

公式サイト
http://www.chartjs.org/

2016年10月時点の最新版(v2.3.0)のダウンロード
ttps://github.com/chartjs/Chart.js/releases/tag/v2.3.0

※v1.x.x系とv2.x.x系は操作方法が異なるので注意してください。

サンプルコード

このサンプルを実行すると冒頭に表示されている画像と同じグラフが表示されます。また、レスポンシブに対応していますので、ブラウザの描画領域が変更された際には自動的にグラフサイズも変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="chart"></canvas>
<script type="text/javascript" src="Chart.js"></script> 
<script type="text/javascript">  

  window.onload = function(){
    
    // 棒グラフ(下部)の項目名    
    var labels = ["1983年","1984年","1985年","1986年","1987年","1988年","1989年","1990年","1991年","1992年","1993年","1994年","1995年","1996年","1997年","1998年","1999年","2000年","2001年","2002年","2003年","2004年","2005年","2006年","2007年","2008年","2009年","2010年","2011年","2012年","2013年","2014年","2015年","2016年"];
    // 棒グラフ(左)のラベル
    var label1 = '東京都平均';
    // 棒グラフ(右)のラベル
    var label2 = '品川区';
    // 棒グラフ(左)のデータ
    var data1  = [148.3,211.9,344.2,491.2,738.1,859.2,836.8,845.7,849.3,774.7,614.3,414.9,320.2,258.9,227.3,216.1,200.8,189.3,181.7,194,188.4,185,184.5,190.7,223.8,263.7,245,217.4,213.3,208.5,206.7,215.9,225.1,226.8];
    // 棒グラフ(右)のデータ
    var data2  = [195.7,211.6,227.8,270.2,1660.8,1500.8,1482.6,1503.6,1500.3,1353.4,798,717.8,492.7,399.8,329.7,308.9,290.4,309.4,294.6,287,280.8,276.4,273.8,291.1,351.9,412.1,364.8,332.1,317.1,311.8,298.4,310.7,324.5,318.6];
    
    // グラフデータの設定
    var config = {
          labels   : labels,
          datasets : [
                       {
                          label                : label1,  
                          backgroundColor      : "rgba(240,128,128,0.6)",  
                          borderColor          : "rgba(240,128,128,0.9)",  
                          hoverBackgroundColor : "rgba(255,64,64,0.75)",   
                          hoverBorderColor     : "rgba(255,64,64,1)",      
                          data   : data1,
                          hidden : false                      
                       },
                       {
                          label                : label2,  
                          backgroundColor      : "rgba(151,187,205,0.6)",
                          borderColor          : "rgba(151,187,205,0.9)",
                          hoverBackgroundColor : "rgba(64,96,255,0.75)",
                          hoverBorderColor     : "rgba(64,96,255,1)",
                          data   : data2,
                          hidden : false                      
                       }
                     ]
    };    
    
    // グラフの生成
    var ctx = document.getElementById("chart").getContext("2d");
    var chart_obj = new Chart(ctx, {type: "bar",data: config,
          options: {
            responsive : true,
            scales     : { yAxes: [{
                             ticks: {
                                callback: function(value){
                                  return value+"万円";
                                }
                             }
                          }]
                        }
          }
        });
  }
</script>
</body>
</html>

グラフで必要な「凡例ラベル」や「Y軸の単位」にも対応させました。

また、グラフ中央にある「凡例ラベル」をクリックすると、表示・非表示を切り替える事が可能です。この初期設定は35行、44行目を「false/true」で切り替えます。

折れ線グラフは51行目の「type: "bar"」の部分を「type: "line"」へ。円グラフは「type: "pie"」に変更します。実際はチャートに併せてデータなどの詳細を変更する必要があります。

詳しくは英語ですが公式サイトをご確認ください。

グラフ関連記事

Google Chartsの使い方とまとめ

グラフデータについて

サンプルのグラフデータは「国土交通省が公表している地価公示データ」をこのサイトの運営者が平均価格、坪単価などを算出して使用しています。





関連記事


前の記事：JavaScriptの整数は64bitに対応していない[検証]
次の記事：Googleマップでアイコンと吹き出しを表示する[Google Maps API]

公開日：2016年10月05日
記事NO：02167