概要
chart.jsでPie Chartを表示する
詳細
chart.jsでPie Chartを表示する
仕様
・CodeIQで出題しているデスマコロシアムのTEAMの参加分布を表示
・テキストボックスの値をグラフに反映
・テキストの内容を変更するとグラフも変更される
サンプル
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="Chart.min.js"></script> <style> table { font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; text-shadow: 1px 1px 0px #fff; background:#eaebec; margin:20px; border:#ccc 1px solid; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1; } table th { padding:21px 25px 22px 25px; border-top:1px solid #fafafa; border-bottom:1px solid #e0e0e0; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background: -moz-linear-gradient(top, #ededed, #ebebeb); } table th:first-child { text-align: left; padding-left:20px; } table tr:first-child th:first-child { -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; } table tr:first-child th:last-child { -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; } table tr { text-align: center; padding-left:20px; } table td:first-child { text-align: left; padding-left:20px; border-left: 0; } table td { padding:18px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); } table tr.even td { background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); } table tr:last-child td { border-bottom:0; } table tr:last-child td:first-child { -moz-border-radius-bottomleft:3px; -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; } table tr:last-child td:last-child { -moz-border-radius-bottomright:3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; } table tr:hover td { background: #f2f2f2; background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); } .box { width: 100%; display: -webkit-box; display: -moz-box; display: box; -moz-box-flex:6.0; -webkit-box-flex:6.0; -o-box-flex:6.0; -ms-box-flex:6.0; } input.team { text-align: center; } </style> <script language="JavaScript"><!-- function displayPieChart() { var pieData = [ { value: parseInt(document.getElementById("M").value), color:"red" }, { value: parseInt(document.getElementById("L").value), color:"green" }, { value: parseInt(document.getElementById("D").value), color:"orange" }, { value: parseInt(document.getElementById("S").value), color:"blue" }, { value: parseInt(document.getElementById("G").value), color:"purple" }, ]; var myPie = new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData); } --></script> </head> <body onload="displayPieChart();"> <div class="box"> <canvas id="pie" height="450" width="450"></canvas> <table> <tr> <th>役</th> <th>人数</th> <th>色</th> </tr> <tr> <td>M</td> <td><input class="team" id="M" value="66" size="3" onchange="displayPieChart();">名</td> <td style="color: red; font-weight: bold;">赤</td> </tr> <tr> <td>L</td> <td><input class="team" id="L" value="76" size="3" onchange="displayPieChart();">名</td> <td style="color: green; font-weight: bold;">緑</td> </tr> <tr> <td>D</td> <td><input class="team" id="D" value="70" size="3" onchange="displayPieChart();">名</td> <td style="color: orange; font-weight: bold;">橙</td> </tr> <tr> <td>S</td> <td><input class="team" id="S" value="63" size="3" onchange="displayPieChart();">名</td> <td style="color: blue; font-weight: bold;">青</td> </tr> <tr> <td>G</td> <td><input class="team" id="G" value="79" size="3" onchange="displayPieChart();">名</td> <td style="color: purple; font-weight: bold;">紫</td> </tr> </table> </div> </body> </html>