スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

Google Chart Tools - 棒グラフ

Google Chart Tools でよく使いそうなグラフをいくつか紹介していきたいと思います。
今回は棒グラフです。


グラフの基本的な記述方法ついては初回の記事をご覧ください。

Column Chart

棒グラフには Column 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 年',     1000,        400,        380],
                ['2005 年',     1170,        460,        400],
                ['2006 年',      660,       1120,        900],
                ['2007 年',     1030,        540,        480],
                ['2008 年',     1350,        750,        800]
            ]);
    
            var options = {
                title: '会社業績',
                hAxis: {title: '年度'}
            };
    
            var chart = new google.visualization.ColumnChart(document.getElementById('gct_sample_column'));
            chart.draw(data, options);
        }
    );
</script>
<div id="gct_sample_column" style="width:80%; height:250pt" ></div>

データ形式

棒グラフでは DataTable のデータを次のように使います。

js_gct_column_data.png
先頭を除く各列がデータグループとなり、 先頭列がメインの軸(X 軸)の項目名となります。

Bar Chart

Bar Chart は横バージョンの棒グラフです。 向きの違い以外は Column 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 options = {
    title: '会社業績',
    vAxis: {title: '年度'}
};

var chart = new google.visualization.BarChart(document.getElementById('gct_sample_bar'));
chart.draw(data, options);

積み上げ棒グラフ

Column Chart および Bar Chart はオプションの変更によって簡単に積み上げ棒グラフの形式に変えることができます。

積み上げ棒グラフにするには isStackedtrue に設定します。
var options = {
    title: '会社業績',
    hAxis: {title: '年度'},
    isStacked: true
};

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

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

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

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

09月 | 2017年10月 | 11月
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

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。