|
日時: 2015/09/14 12:18
名前: lightbox
|
拡張子:
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
window[window.location.hostname+'.loadjQuery'] = true;
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
document.write("<"+"script src=\"http://www.google.com/jsapi\"></"+"script>");
}
</script>
<script>
google.load('visualization', '1', { packages: ['table','piechart'] });
$.fn.extend({
gvt: function() {
$(this).data("DataTable", new google.visualization.DataTable());
return this;
},
gvt_addColumn: function(title){
$(this).data("DataTable").addColumn('string', title);
return this;
},
gvt_addNumColumn: function(title){
$(this).data("DataTable").addColumn('number', title);
return this;
},
gvt_addRow: function(){
$(this).data("CurRow", $(this).data("DataTable").addRow() );
return this;
},
gvt_setCell: function(col, data){
$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
return this;
},
gvt_setNumCell: function(col, data){
$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
return this;
},
gvt_setRowCell: function(row, col, data){
$(this).data("DataTable").setCell(row, col, data+"" );
return this;
},
gvt_draw: function(width){
var visualization = new google.visualization.Table($(this)[0]);
visualization.draw($(this).data("DataTable"), {
cssClassNames: {
tableCell: 'myCell',
headerCell: 'myHeader'
},
width: width+"px"
});
return this;
},
gvt_pie: function(width,height,title){
var visualization = new google.visualization.PieChart($(this)[0]);
visualization.draw($(this).data("DataTable"), {
width: width,
height: height,
is3D: true,
title: title,
legend: 'right'
});
return this;
}
});
$(function(){
$("#pie_chart_area")
.gvt()
.gvt_addColumn('分類')
.gvt_addNumColumn('データ');
testData = [
12543,
326,
2890,
1112,
200,
8891,
6333
];
var row;
for( var i = 0; i < testData.length; i++ ) {
$("#pie_chart_area")
.gvt_addRow()
.gvt_setCell(0,"分類"+(i+1))
.gvt_setNumCell(1,testData[i]);
}
$("#pie_chart_area").gvt_pie(600,400,'テスト円グラフ');
});
</script>
<div id="pie_chart_area"></div>
|