GoogleChartのChartEditorクラスの使い方
今回は、Google ChartのChartEditorクラスの使い方について書きたいと思います。このクラスを用いるとチャートの設定変更ダイアログを簡単に作成できます。
設定を変更後、ChartEditorクラスから設定済みChartWrapperクラスを取得して使えばいいのですが、ここで注意点があります。注意することは ChartEditorクラスのgetChartWrapperメソッドは当該クラスに設定したeventListenerの関数中でしか正常に機能しないこ とです。
まずは、簡単なサンプルです。チャートを編集ボタンを押すとチャートの設定を変更できます。
以下ソース。ポイントはChartWrapperクラスを毎回ChartEditorから取得するのではなく、globalオブジェクトとして保持していること。
<script type="text/javascript" src="http://www.d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="samplesimple">
<button id="editbuttonsimple">チャートを編集</button>
<div id="vis_divsimple" style="height: 400px; width: 600px;"></div>
</div>
<script type="text/javascript">
var wrapper;
var chartEditor;
function initialize(){
google.load('visualization', '1.0', {packages: ['charteditor'],callback:loadEditor});
//チャートを編集ボタンを押したらダイアログを開く
d3.select("#editbuttonsimple").on("click",function(){
chartEditor.openDialog(wrapper, {});
});
}
function loadEditor(){
chartEditor = new google.visualization.ChartEditor();
//データテーブル作成
var chartdata=[["A",30],["B",20],["C",49],["D",60]];
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'countory');
dataTable.addColumn('number', 'population');
dataTable.addRows(chartdata);
wrapper = new google.visualization.ChartWrapper({
'chartType':'LineChart',
'dataTable':dataTable,
'options': {'title': "population"}
});
google.visualization.events.addListener(chartEditor, 'ok', showdataCallByChartEditor);
showdata();
}
//ChartEditorのeventListenerで呼ばれる場合と違う場合で分ける
function showdataCallByChartEditor(){
//wrapperを保存
wrapper=chartEditor.getChartWrapper();
wrapper.draw(document.getElementById('vis_divsimple'));
}
function showdata(){
wrapper.draw(document.getElementById('vis_divsimple'));
}
initialize();
</script>次に表示するデータも変更できる場合です。
以下にサンプルを示します。セレクトボックスから誰に関するデータかを選択、及びチャートを編集ボタンを押すとチャートを編集できます。
欅坂４６メンバー間の写真統計（１１月、１２月分）
写真を撮ったメンバー：以下ソース。
<script type="text/javascript" src="http://www.d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="sample">
<h2>欅坂４６メンバー間の写真統計（１１月、１２月分）</h2>
<button id="editbutton">チャートを編集</button>
写真を撮ったメンバー：
<select id="nameselect"></select>
<div id="vis_div" style="height: 400px; width: 600px;"></div>
</div>
<script type="text/javascript">
var namelist=["石森 虹花","今泉 佑唯","上村 莉菜","尾関 梨香","織田 奈那","小池 美波","小林 由依","齋藤 冬優花","佐藤 詩織","志田 愛佳","菅井 友香","鈴本 美愉","長沢 菜々香","土生 瑞穂","原田 葵","平手 友梨奈","守屋 茜","米谷 奈々未","渡辺 梨加","渡邉 理佐","長濱 ねる"];
var matrix=[
[0,0,2,0,2,8,1,1,1,1,1,1,0,1,1,2,1,0,0,5,0],
[0,0,0,0,2,1,4,9,0,0,2,5,1,0,1,10,1,0,1,2,1],
[12,5,0,34,9,7,11,5,7,8,14,9,5,23,21,5,18,6,5,13,4],
[1,0,4,0,0,0,1,3,2,0,0,2,1,3,2,1,3,0,2,1,3],
[0,1,0,0,0,4,0,0,0,5,0,0,6,1,1,1,7,1,2,3,0],
[2,0,4,0,4,0,1,0,0,0,1,0,3,0,2,0,0,1,0,1,0],
[0,1,2,0,3,4,0,1,0,1,1,0,1,1,6,2,3,1,0,6,0],
[2,31,4,8,4,5,3,0,2,1,16,12,8,3,4,8,17,1,0,4,2],
[0,1,1,2,1,0,0,1,0,1,5,0,0,4,2,0,0,0,1,0,14],
[0,0,1,2,2,0,0,0,0,0,0,0,0,1,1,0,2,0,4,2,0],
[3,6,8,5,3,5,1,13,7,3,0,4,10,17,3,2,4,2,5,2,1],
[0,2,2,0,1,0,0,1,0,0,1,0,0,0,1,21,1,0,1,0,0],
[1,2,2,3,9,6,1,3,0,2,6,3,0,1,1,2,8,5,9,1,0],
[0,0,2,1,1,1,0,0,1,1,6,1,0,0,0,2,0,1,3,0,0],
[0,0,3,0,2,2,3,0,0,1,0,1,1,1,0,2,7,0,0,3,0],
[2,6,1,0,1,0,0,0,0,2,0,16,0,5,3,0,0,0,4,0,1],
[1,4,9,2,7,1,2,7,0,2,3,0,7,5,10,3,0,3,8,7,0],
[1,0,1,0,2,4,1,0,0,0,1,2,4,2,1,2,3,0,1,1,0],
[0,0,0,1,1,0,0,1,1,4,2,0,8,5,1,1,2,0,0,0,2],
[2,3,2,0,5,2,6,1,0,2,2,2,0,0,7,0,1,0,0,0,0],
[0,0,0,2,0,1,0,0,6,0,0,0,0,0,0,0,0,0,2,0,0]];
var id=0;
var chartEditor=null;
var dataTable=null;
var wrapper;
var titlesuffix="写真を撮った人:";
//セレクトボックスを変更した際に呼ばれる
//idをセレクトボックスで選択した値に基づいて変更し、
//dataTableを更新し、chartを更新して表示する
function getSelected(obj){
id = Number(obj.options[obj.selectedIndex].value);
setdata();
showdata();
}
//matrixとidに基づいてデータテーブルdataTableを作成
function setdata(){
var chartdata=[];
for(var i=0;i<matrix.length;i++){
if(matrix[id][i]!=0){
chartdata.push([namelist[i],matrix[id][i]]);
}
}
chartdata.sort(function(a,b){return b[1]-a[1];});
dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '写真を撮られた人');
dataTable.addColumn('number', '写真を撮られた回数');
dataTable.addRows(chartdata);
}
//各種初期化
function initialize(){
//button の初期化
d3.select("#editbutton").on("click",changeEditor);
//namelistに基づいてセレクトボックスを初期化
d3.select("#nameselect").selectAll("option")
.data(namelist)
.enter()
.append("option")
.attr("value",function(d,i){return ""+i;})
.text(function(d,i){return d;});
d3.select("#nameselect").on("change",function(){getSelected(this);});
//google chart関連オブジェクトの初期化
google.load('visualization', '1.0', {packages: ['charteditor'],callback:loadEditor});
function loadEditor(){
chartEditor = new google.visualization.ChartEditor();
setdata();
wrapper = new google.visualization.ChartWrapper({
'chartType':'PieChart',
'dataTable':dataTable,
'options': {'title': titlesuffix+namelist[id],
'vAxis':{title:'写真を撮られた回数'},
'hAxis':{title:'写真を撮られた人'}
}
});
google.visualization.events.addListener(chartEditor, 'ok', showdataCallByChartEditor);
showdata();
}
}
//editボタンから呼ばれる
function changeEditor(){
chartEditor.openDialog(wrapper, {});
}
function showdataCallByChartEditor(){
wrapper=chartEditor.getChartWrapper();
wrapper.draw(document.getElementById('vis_div'));
}
function showdata(){
wrapper.setDataTable(dataTable);
wrapper.setOption("title",titlesuffix+namelist[id]);
wrapper.setOption("animation",null);
wrapper.draw(document.getElementById('vis_div'));
}
initialize();
</script>