Google Chartsを使って層別散布図を書くには

   

散布図を書こうと思う。

データはグループ化されており、それぞれを色分けした散布図が書きたい。でもよくわからずにハマったので書く。

サンプルはここにあるんです

よくある散布図ですね。

これを青一色じゃなくて、グループごとに分けたいときあるじゃないですか。ないですか。あると思います

結論から言うとこういう散布図

これを例に取ると、年次別のデータにグループ化しておいて、それを表示しましょうというもの。

しかし、サンプルには書いてないんですね。なんだよそれって。

書き方

function drawGradeM() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var dataGradeM = new google.visualization.DataTable();
dataGradeM.addColumn('number', '横軸数値');
dataGradeM.addColumn('number', '1年次');
dataGradeM.addColumn('number', '2年次');
dataGradeM.addColumn('number', '3年次');
dataGradeM.addColumn('number', '4年次');
dataGradeM.addColumn('number', '5年次');
dataGradeM.addColumn('number', '6年次');
dataGradeM.addColumn('number', '7年次');
dataGradeM.addColumn('number', '8年次');
dataGradeM.addColumn('number', '9年次');
dataGradeM.addColumn('number', '10年次');
dataGradeM.addColumn('number', '11年次');
dataGradeM.addColumn('number', '12年次');
dataGradeM.addColumn('number', '13年次');
dataGradeM.addColumn('number', '14年次');

dataGradeM.addRows([
ここにデータセットを記入する*後述
]);

var dataGradeMOptions = {
title: 'グラフのタイトル',
hAxis: {title: '横軸名'},
vAxis: {title: '縦軸名'}
};

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(dataGradeM, dataGradeMOptions);

}

こんな感じで書きます。サンプルとそれほど変わらないと思う。

HTMLには

<div id="chart_div" style="width: 900px; height: 800px;"></div>

みたいな感じでid指定しておけば、そこに表示されます。

肝心なデータセットの書き方どうするのか

散布図をレイヤーごとに分けて表示するには、データセットの書き方はこんな感じになります

つまり、

縦軸データ,1年次,2年次,3年次・・・・

というデータセットにする。

最大年次を6年として、1年次に5ポイント取っていて、横軸が3の場合は

[3,5,0,0,0,0,0]

2年次に10ポイント取っていて、横軸が21の場合は

[21,0,10,0,0,0,0]

という感じです。グループ別にカラムが一つ増えるイメージですね。

CSVで書くと

横軸データ,1年次ポイント,2年次ポイント,3年次ポイント,4年次ポイント,5年次ポイント,6年次ポイント

という形式でカラムを増やしていく必要があります。

結論

書けてしまえば簡単ですね(白目

おすすめ記事一覧

 - Google