Google Chart Tools - 円グラフ、計器図

今回は Google Chart Tools円グラフ計器図です。

グラフの基本的な記述方法ついては省略していますので、 詳細は初回記事をご覧ください。

円グラフ(Pie Chart)

円グラフには Pie Chart を使用します。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    var data = google.visualization.arrayToDataTable([
        [       '',  ''],
        [   '仕事',  11],
        [   '食事',   2],
        [   '通勤',   2],
        ['TV 鑑賞',   2],
        [   '睡眠',   7]
    ]);
    
    var options = {
        title: '一日の活動',
    };
    
    var chart = new google.visualization.PieChart(
        document.getElementById('gct_sample_pie_l'));
    chart.draw(data, options);

</script>
<div id="gct_sample_pie" style="width:60%; height:200pt" ></div>
初回のサンプルで使っていましたが、 is3D オプションを true に設定すると 3D 表示となります。

データ形式

円グラフでは DataTable のデータを次のように使います。
js_gct_pie_data.png
列は 2 列のみ指定します。 先頭列が項目名で、 2 列目がデータの値です。 割合(%) は自動で計算されます。
先頭行(列情報)は特に使用しません。

計器図(Gauge)

もうグラフやチャートとは呼べなくなってきていますが、 Google Chart Tools ではスピードメーターのような Gauge が用意されています。
これは Google Web Font でのフォントのロード時間の表示などに利用されています。
google.load("visualization", "1", {packages:["gauge"]});
google.setOnLoadCallback(
    function() {
        var data = google.visualization.arrayToDataTable([
            [       '',  ''],
            [ 'Memory',  80],
            [    'CPU',  55],
            ['Network',  68]
        ]);

        var options = {
            redFrom:    90, redTo:   100,   // 赤の範囲
            yellowFrom: 75, yellowTo: 90,   // 黄色の範囲
            minorTicks: 5                   // 小目盛りの単位 (デフォルトは 2)
        };

        var chart = new google.visualization.Gauge(
            document.getElementById('gct_sample_gauge'));
        chart.draw(data, options);
    }
);
注意点としては Gauge のパッケージは corechart ではなく、 "gauge" を使います。

オプションで赤、黄色、緑のゾーンを指定することができます。
オプション
redFrom, redTo
黄色 yellowFrom, yellowTo
greenFrom, greenTo
また、 max, min オプションによって、 メーターの範囲を指定できます。 デフォルトは 100 と 0 です。

データ形式

計器図では DataTable のデータを次のように使います。
js_gct_gauge_data.png
円グラフと同様に列は 2 列のみ指定します。 1 行が 1 つのメーターとなります。
先頭行(列情報)は特に使用しません。


次のように 1 列を 1 つのメーターとする書き方もできます。
 var data = google.visualization.arrayToDataTable([
     ['Memory', 'CPU', 'Network'],
     [      80,    55,        68]
 ]);

ただし、範囲、色のゾーンを各メーターで別々に指定できないので、 一度に複数のメーターを表示することはあまりないかも知れません。

関連記事
スポンサーサイト
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

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