Google Chartsを使って層別散布図を書くには
散布図を書こうと思う。
データはグループ化されており、それぞれを色分けした散布図が書きたい。でもよくわからずにハマったので書く。
よくある散布図ですね。
これを青一色じゃなくて、グループごとに分けたいときあるじゃないですか。ないですか。あると思います
結論から言うとこういう散布図
これを例に取ると、年次別のデータにグループ化しておいて、それを表示しましょうというもの。
しかし、サンプルには書いてないんですね。なんだよそれって。
書き方
[code]
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);
}
[/code]
こんな感じで書きます。サンプルとそれほど変わらないと思う。
HTMLには
[code]<div id="chart_div" style="width: 900px; height: 800px;"></div>[/code]
みたいな感じで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年次ポイント
という形式でカラムを増やしていく必要があります。
結論
書けてしまえば簡単ですね(白目