Google Chart Tools - グラフの合成

今回は Google Chart Tools のグラフの合成方法についてです。 折れ線グラフと棒グラフといった違うタイプを組み合わせたグラフを作成します。

組み合わせるといっても、円グラフと棒グラフのようにどれとでも可能というわけではありません。
組み合わせができるのは、次のグラフです。 グラフの組み合わせには複合グラフ(Combo 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 = google.visualization.arrayToDataTable([
            ['月',     'ボリビア', 'エクアドル', 'マダガスカル', 'パプアニューギニア', 'ルワンダ', '平均'],
            ['2004/05',       165,         938,             522,                 998,         450, 614.6 ],
            ['2005/06',       135,         1120,            599,                 1268,        288, 682   ],
            ['2006/07',       157,         1167,            587,                 807,         397, 623   ],
            ['2007/08',       139,         1110,            615,                 968,         215, 609.4 ],
            ['2008/09',       136,         691,             629,                 1026,        366, 569.6 ]
        ]);
     
        var ac = new google.visualization.ComboChart(document.getElementById('gct_sample_combo'));
        ac.draw(data, {
            title : '国別のコーヒー月間生産量',
            vAxis: {title: "カップ数"},
            hAxis: {title: "月"},
            seriesType: "bars",           // 全体は棒グラフ(default='line')
          series: {5: {type: "line"}}   // 平均だけ折れ線グラフ
        });
         }
     );

</script>
<div id="gct_sample_combo" style="width:100%; height:250pt" ></div>
seriesType で全体のグラフタイプを指定し、 series で変えたいグループの列番号とグラフタイプを指定します。

グラフタイプには次のキーワードを指定します。
キーワード 種別
line 折れ線グラフ
area 面積グラフ
bars 棒グラフ
candlesticks Candlesticks Chart
steppededArea Stepped Area Chart


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

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

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

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

04月 | 2017年05月 | 06月
- 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 31 - - -


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

yohshiy

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

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

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