Google Chart Tools - 散布図

今回は Google Chart Tools散布図の紹介です。
散布図はデータの分布を表したり、科学系の実験結果を表示する場合などによく使われます。

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

Scatter Chart

Google Chart Tools では散布図には Scatter 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([
                ['Age', '男子', '女子'],
                [    8,     12,     11],
                [   13,   null,     18],
                [    4,    5.5,      7],
                [   11,     14,     16],
                [    4,      5,   null],
                [    3,    3.5,    2.8],
                [  6.5,      7,      5],
                [   14,   15.5,     22]
            ]);
    
            var options = {
                title: '年齢別の体重分布',
                hAxis: {title: '年齢',  format:'### 歳'},
                vAxis: {title: '体重(kg)'}
            };
    
            var chart = new google.visualization.ScatterChart(document.getElementById('gct_sample_scatter'));
            chart.draw(data, options);
        }
    );
</script>
<div id="gct_sample_scatter" style="width:80%; height:250pt" ></div>
年齢の表示は hAxis.format オプションでフォーマットを指定しています。 ここには 数値用の ICU のパターンを指定します。

データ形式

散布図では DataTable のデータを次のように使います。

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

散布図の場合は X 軸の順番に並べる必要はありませんし、 X 値が重複したデータを指定することもできます。 また、 null を指定して、値を設定しないこともできます。

曲線を使った散布図

科学系の実験結果の表示に使うときには、 スプラインなどの曲線で繋げて表示することがよくあります。
こういった曲線の散布図も書くことができます。

散布図ではデフォルトは線幅が 0 になっています。 オプションで lineWidth1 以上にすると線が表示されます。
また、そのままでは折れ線グラフのように直線で繋げます。 curveType'function' に設定すると補正曲線となります。
var data = google.visualization.arrayToDataTable([
    [   '', 'カドミウム'],
    [ 450,   0.05],
    [ 500,   0.12],
    [ 550,   0.35],
    [ 600,   0.68],
    [ 620,   0.73],
    [ 640,   0.50],
    [ 650,   0.24],
    [ 680,   0.08],
    [ 700,   0.02]
]);

var options = {
    hAxis: {title: '波長(nm)',
            viewWindow: {min:450, max:700},   // 表示範囲を 450 - 700
            gridlines:{color:'transparent'}}, // 補助線を非表示
    vAxis: {title: '吸光度'},
    legend: 'none',                           // 凡例を非表示
    lineWidth: 1,
    curveType: 'function'
};

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

さらに曲線だけにして点を表示させたくない場合は pointSize0 に設定します。
var options = {
    hAxis: {title: '波長(nm)', viewWindow: {min:450, max:700}, gridlines:{color:'transparent'}},
    vAxis: {title: '吸光度'},
    legend: 'none',
    lineWidth: 1,
    curveType: 'function',
    pointSize: 0
};

サンプルは省きますが、科学系のグラフで使用しそうなオプションをついでにもう一つ紹介します。
hAxis:{logScale:true} といったオプションをつけると Y 軸が log のスケールとなります。

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

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

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

[サブジャンルランキング]
プログラミング
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

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