サンプル
* ベースは以下の関連記事と変わらんけど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>