Google Chart Tools - 折れ線グラフ、面積グラフ

今回は Google Chart Tools折れ線グラフ面積グラフの紹介です。

折れ線グラフ(Line Chart)

Google Chart Tools では折れ線グラフには Line Chart を使用します。

Line Chart は初回にあげたので、 今回はデータの扱いについて補足します。

データ形式

折れ線グラフでは先頭列を文字列にすると 棒グラフ、 数値にすると 散布図 のような扱いになります。
 var data = google.visualization.arrayToDataTable([
     [    '', '売上高', '営業利益', '経常利益'],
     ['2004',     1000,        400,        380],
     ['2005',     1170,        460,        400],
     ['2006',      660,       1120,        900],
     ['2007',     1030,        540,        480],
     ['2008',     1350,        750,        800]
 ]);
 var data = google.visualization.arrayToDataTable([
     [  '', '売上高', '営業利益', '経常利益'],
     [2004,     1000,        400,        380],
     [2005,     1170,        460,        400],
     [2006,      660,       1120,        900],
     [2007,     1030,        540,        480],
     [2008,     1350,        750,        800]
 ]);


同じ 2007 でも数値 2007 とするか文字列 '2007' とするかによってグラフが少し変わります。
文字列の場合はデータ項目(Domain 名)として扱うのに対して、 数値の場合は X 軸の値 として扱います。 また、数値として扱っている場合には補助線や表示フォーマットが変わります。
次のようなオプションをつけると同じような表示になります。
 var options = {
     title: '数値版サンプル',
     hAxis: {title: '年度',
             format: "####",                   // 表示フォーマットの指定
           gridlines:{color:'transparent'}}  // 補助線を非表示
 };

数値を指定した折れ線グラフは線幅をつけた散布図とほぼ同じです。
折れ線グラフにも curveType のオプションがあり、'function' を指定して補正曲線とすることもできます。


これは文字列と数値のどちらがいいというものではありません。
年度はどちらでもいいのですが、 人や国名などの文字列でしか表現できないものにも使えるし、 散布図のように実験データの表示にも使えるということです。 用途にあわせて使い分けをしてください。

面積グラフ(Area Chart)

Area Chart は折れ線グラフの折れ線の下部が色付きで表示される面積グラフです。 面積グラフは数量を面積の大きさで表したものでサイトのアクセス数などに使われます。
記述方法は Line Chart と同じです。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(
     function() {
 
        var data = new google.visualization.DataTable();
        data.addColumn('date', '');
        data.addColumn('number', 'アクセス数');
        data.addRows([
            [new Date(2012,11,10), 402],
            [new Date(2012,11,11), 452],
            [new Date(2012,11,12), 428],
            [new Date(2012,11,13), 459],
            [new Date(2012,11,14), 478],
            [new Date(2012,11,15), 191],
            [new Date(2012,11,16), 169]
        ]);
         var options = {
             title: 'アクセス数',
             hAxis: {format: 'MM月dd日'}, // 表示フォーマットの指定
            legend: 'none'
         };
         var chart = new google.visualization.AreaChart(document.getElementById('gct_sample_area'));
         chart.draw(data, options);
     }
 );

</script>
<div id="gct_sample_area" style="width:80%; height:250pt" ></div>
このサンプルは数値(日付)版です。
日付の表示は hAxis.format オプションでフォーマットを指定しています。 ここには 日付用の ICU のパターンを指定します。

関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
48位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
6位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。