<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<style>
#table_area .google-visualization-table-table {
border-collapse: collapse;
}
.myHeader {
color:#ffffff;
background: #123456;
padding: 12px!important
border: solid #303030 1px;
}
.myCell {
padding: 12px!important;
border: solid #303030 1px!important;
}
</style>
<script>
var testData =
[
12543,
326,
2890,
1112,
200,
8891,
6333
];
// *********************************************
// jQuery を使用して画面上の
// コンテンツがロードされてから
// google.visualization をロード
// *********************************************
$(function(){
google.charts.load('current', {'packages':['corechart','table']});
google.charts.setOnLoadCallback(function(){
// *********************************************
// jQuery によるプラグイン化
// *********************************************
$.fn.extend({
gv_getData: function() {
return $(this).data("DataTable");
},
gv_setData: function() {
if (arguments.length == 1) {
// 引数がある場合は引数の DataTable をセットする
$(this).data("DataTable",arguments[0]);
}
else {
// 引数が無い場合は初期化した DataTable をセットする
$(this).data("DataTable", new google.visualization.DataTable());
}
return this;
},
gv_addColumn: function(title){
$(this).data("DataTable").addColumn('string', title);
return this;
},
gv_addNumColumn: function(title){
$(this).data("DataTable").addColumn('number', title);
return this;
},
gv_addRow: function(){
$(this).data("CurRow", $(this).data("DataTable").addRow() );
return this;
},
gv_setCell: function(col, data){
$(this).data("DataTable").setCell($(this).data("CurRow"), col, data+"" );
return this;
},
gv_setNumCell: function(col, data){
$(this).data("DataTable").setCell($(this).data("CurRow"), col, data );
return this;
},
gv_setRowCell: function(row, col, data){
$(this).data("DataTable").setCell(row, col, data+"" );
return this;
},
gv_setRowNumCell: function(row, col, data){
$(this).data("DataTable").setCell(row, col, data );
return this;
},
gv_table: function(options){
var visualization = new google.visualization.Table($(this).get(0));
visualization.draw($(this).data("DataTable"), options);
return this;
},
gv_pie: function(options){
var visualization = new google.visualization.PieChart($(this).get(0));
visualization.draw($(this).data("DataTable"), options);
return this;
}
});
// *********************************************
// 初期の実行
// *********************************************
drawPieChart()
});
});
// *********************************************
// visualization のロード完了時に実行
// *********************************************
function drawPieChart() {
var pie_chart = $("#pie_chart_area");
var table_area = $("#table_area");
// ***************************************
// 円グラフ作成
// ***************************************
pie_chart
.gv_setData() // DataTable の初期化
.gv_addColumn('分類') // 列追加
.gv_addNumColumn('データ'); // 列追加
// ***************************************
// 円グラフ内に DataTable を作成
// ***************************************
for( var i = 0; i < testData.length; i++ ) {
pie_chart
.gv_addRow() // 行追加
.gv_setCell(0,"分類"+(i+1)) // カラムデータセット
.gv_setNumCell(1,testData[i]); // カラムデータセット
}
// ***************************************
// 円グラフ描画
// ***************************************
pie_chart.gv_pie({
width: 500,
height: 400,
is3D: true,
title: '円グラフの表示',
legend: 'right'
});
// ***************************************
// pie_chart で作成した DataTable
// を使ってテーブルを表示する
// ***************************************
table_area
.gv_setData(pie_chart.gv_getData()) // データのセット
.gv_table({
width: 300,
cssClassNames: {
tableCell: 'myCell',
headerCell: 'myHeader'
},
showRowNumber: true
});
}
</script>
<div id="pie_chart_area"></div>
<div id="table_area"></div>
ダイアログが表示された時、すでにテキストエリア内のコードはクリップボードにコピーされていますが、内容を変更して再度クリップボードにコピーする事ができます。 get_img_html_clip.htm
