Result
編集はcontenteditable属性を使っています。
動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください
jQuery
var vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-type').html(); $('.chart').empty(); $('.legend').empty(); $('.titles').empty(); $('.title').empty(); $('.x-axis').empty(); $('.title').html(chartTitleVal); $('.chart').prepend('<div class="x-axis">'+tableTitle+'</div>');//テキストをグラフ側にも反映 $('th').not(':first-of-type').each(function(){ var title = $(this).html(); $('.titles').append('<div style="width:'+barwidth+'px;">'+title+'</div>'); }); $(e).children('td').not(':first-of-type').each(function(){ var contents = $(this).html(); var value = parseInt(contents); if( value > heighest){ heighest = value } }); $(e).children('td').not(':first-of-type').each(function(){//tableの数値をグラフに反映 var contents = $(this).html(); var value = parseInt(contents); var barheight = (value/heighest)*100; $('.chart').append('<div class="bar" style="width:'+barheight+'%; height:'+barwidth+'px;"></div>'); $('.legend').append('<div style="width:'+barwidth+'px;">'+value+'</div>'); });}$('tr').not('.header').on('click', function(){ var x = $(this); x.css({'background':'#E2EBC2'}).addClass('selected').siblings().removeClass('selected').css({'background':'#FFFFFF'}); vis(x);});$(function(){ var x = $('tr').not('.header').first(); x.css({'background':'#E2EBC2'}).addClass('selected').siblings().css({'background':'#FFFFFF'}); vis(x);});$('td').on('keyup paste input', function(){ var x = $(this).parent(); vis(x);});$('th').on('keyup paste input', function(){ var x = $('.selected'); vis(x);});$('.table-title').on('keyup paste input', function(){ var x = $('.selected'); vis(x);}); |
css
.chart { margin-top: -60px; border-top: 1px solid black; border-left: 1px solid black; height: 450px; width: 300px; transform: rotate(-90deg);}.bar { background: #66C0CC; margin-top: 10px; animation: height 0.8s ease; padding: 10px;}.x-axis { margin-top: -30px; padding-bottom: 10px;}.legend { clear: both; color: #66C0CC; width: 450px;}.legend div { float: left; margin-left: 10px;}.titles { clear: both; width: 450px; margin-top: -60px;}.titles div { float: left; margin-left: 10px;} |
html
<div class="left"> <div class="table"> <h2 class="table-title" contenteditable="true">販売実績</h2> <table> <tr class="header"> <th contenteditable=true>年</th> <th contenteditable=true>りんご</th> <th contenteditable=true>なし</th> <th contenteditable=true>みかん</th> <th contenteditable=true>もも</th> </tr> <tr> <td contenteditable=true>2010年</td> <td contenteditable=true>2</td> <td contenteditable=true>31</td> <td contenteditable=true>24</td> <td contenteditable=true>51</td> </tr> <tr> <td contenteditable=true>2011年</td> <td contenteditable=true>36</td> <td contenteditable=true>21</td> <td contenteditable=true>47</td> <td contenteditable=true>109</td> </tr> <tr> <td contenteditable=true>2012年</td> <td contenteditable=true>56</td> <td contenteditable=true>9</td> <td contenteditable=true>33</td> <td contenteditable=true>18</td> </tr> <tr> <td contenteditable=true>2013年</td> <td contenteditable=true>90</td> <td contenteditable=true>55</td> <td contenteditable=true>71</td> <td contenteditable=true>12</td> </tr> <tr> <td contenteditable=true>2014年</td> <td contenteditable=true>36</td> <td contenteditable=true>92</td> <td contenteditable=true>77</td> <td contenteditable=true>61</td> </tr> </table> </div></div><div class="right"> <h3 class="title"></h3> <div class="chart"> <div class="x-axis"></div> </div> <div class="titles"> </div> <div class="legend"> </div></div> |
via
Just a moment...
codepen.io
