サンプル
* ベースは以下の関連記事と変わらんけどhttp://blogs.yahoo.co.jp/dk521123/35501040.html
<html>
<head>
<style>
.modal-content {
position:fixed;
display:none;
z-index:2;
min-width:30%;
max-width:90%;
margin:0;
padding:10px 20px;
border:2px solid #aaa;
background:#fff;
}
.modal-content p {
margin:0;
padding:0;
}
.modal-overlay {
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.75);
}
.modal-close {
color:#00f;
text-decoration:underline;
}
.modal-close:hover {
cursor:pointer;
color:#f00;
}
</style>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>
<script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</head>
<body>
<div id="chartToDrow"></div>
<script>
var dataset = [
{"Label-A": 20, "Label-B": 50, "Label-C": 30},
];
var chart = c3.generate({
bindto: '#chartToDrow',
data: {
json: dataset,
keys: {
value: ['Label-A', 'Label-B', 'Label-C']
},
type : 'pie',
onclick: function (d, element) {
showModal('#modalDialog');
}
}
});
function showModal(modalId) {
// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');
// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');
// モーダルコンテンツのIDを取得
var modal = modalId;
var chart = showChart();
// モーダルコンテンツの表示位置を設定
modalResize();
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
chart.resize();
// 「.modal-overlay」あるいは「.modal-close」をクリック
$('.modal-overlay, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
// オーバーレイを削除
$('.modal-overlay').remove();
});
});
// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});
// モーダルコンテンツの表示位置を設定する関数
function modalResize(){
// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();
// モーダルコンテンツの表示位置を取得
var x = (w - $(modal).outerWidth(true)) / 2;
var y = (h - $(modal).outerHeight(true)) / 2;
// モーダルコンテンツの表示位置を設定
$(modal).css({'left': x + 'px','top': y + 'px'});
}
}
function showChart() {
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 'Mike', 'Tom', 'Kevin', 'Sam', 'Ken'],
['score', 76, 98, -35, 46, -56],
],
type: 'bar',
},
grid: {
y: {
lines: [{value:0}]
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: 75,
},
height: 130
}
},
legend: {
show: false
}
});
return chart;
}
</script>
<div id="modalDialog" class="modal-content">
<div id="chart"></div>
<p><a class="modal-close">閉じる</a></p>
</div>
</script>
</body>
</html>
