Result
jQuery
$(document).ready(function() { // 配列内の最大値を取得する関数 Array.max = function(array) { return Math.max.apply(Math, array); }; // すべての値を取得 var counts = $('#heat-map-3 tbody td').not('.stats-title').map(function() { return parseInt($(this).text()); }).get(); // 最大値を返す var max = Array.max(counts); // 色を指定する xr = 255; xg = 255; xb = 255; yr = 78; yg = 204; yb = 243; n = 100; // 各データポイントをループして、その％の値を計算する $('#heat-map-3 tbody td').not('.stats-title').each(function() { var val = parseInt($(this).text()); var pos = parseInt((Math.round((val / max) * 100)).toFixed(0)); red = parseInt((xr + ((pos * (yr - xr)) / (n - 1))).toFixed(0)); green = parseInt((xg + ((pos * (yg - xg)) / (n - 1))).toFixed(0)); blue = parseInt((xb + ((pos * (yb - xb)) / (n - 1))).toFixed(0)); clr = 'rgb(' + red + ',' + green + ',' + blue + ')'; $(this).css({ backgroundColor: clr }); });}); |
css
#heat-map-3{margin-top:15px;}.heat-map { border: 1px solid #ccc; margin: 0 auto 20px auto; width: 640px;}.heat-map tr th { padding: 5px 7px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; border-left: 1px solid #fff; text-shadow: 0 1px 0 #fff; font: bold 11px Arial, sans-serif; text-transform: uppercase; color: #000; background-color: #F1F1F1; background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);}.heat-map tr th.last {border-right: none;}.heat-map tr th.first, .heat-map tr td.stats-title { border-left: none; text-align: left;}.heat-map tr td { padding: 5px 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; text-align right; color: #000; font-size: 11px;}tr.stats-row {text-align: right;}.heat-map tr.stats-row td.stats-title { text-align: left; color: #111; font-size: 13px; text-shadow: 0 1px 0 #fff; background: #efefef; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}.heat-map tr.stats-row td.stats-title.last {border-bottom: 1px solid #fff;} |
html
<table cellpadding="0" cellspacing="0" border="0" class="heat-map" id="heat-map-3"><thead><tr> <th class="first">都道府県</th><th>データ1</th><th>データ2</th><th>データ3</th><th>データ4</th><th>データ5</th><th class="last">データ6</th></tr></thead><tbody><tr class="stats-row"> <td class="stats-title">東京</td><td>1</td><td>55</td><td>26</td><td>19</td><td>39</td><td>21</td></tr><tr class="stats-row"> <td class="stats-title">大阪</td><td>50</td><td>27</td><td>13</td><td>4</td><td>38</td><td>22</td></tr><tr class="stats-row"> <td class="stats-title">新潟</td><td>3</td><td>52</td><td>35</td><td>11</td><td>20</td><td>2</td></tr><tr class="stats-row"> <td class="stats-title">千葉</td><td>31</td><td>34</td><td>15</td><td>25</td><td>14</td><td>21</td></tr><tr class="stats-row"> <td class="stats-title">静岡</td><td>36</td><td>65</td><td>33</td><td>2</td><td>35</td><td>8</td></tr><tr class="stats-row"> <td class="stats-title">京都</td><td>41</td><td>17</td><td>27</td><td>16</td><td>32</td><td>21</td></tr><tr class="stats-row"> <td class="stats-title">石川</td><td>32</td><td>59</td><td>17</td><td>20</td><td>31</td><td>4</td></tr><tr class="stats-row"> <td class="stats-title">和歌山</td><td>53</td><td>14</td><td>4</td><td>16</td><td>33</td><td>11</td></tr><tr class="stats-row"> <td class="stats-title">鳥取</td><td>46</td><td>25</td><td>3</td><td>15</td><td>22</td><td>19</td></tr><tr class="stats-row"> <td class="stats-title">青森</td><td>8</td><td>11</td><td>9</td><td>28</td><td>24</td><td>18</td></tr><tr class="stats-row"> <td class="stats-title">富山</td><td>6</td><td>49</td><td>1</td><td>22</td><td>30</td><td>10</td></tr><tr class="stats-row"> <td class="stats-title">福島</td><td>16</td><td>39</td><td>14</td><td>7</td><td>35</td><td>10</td></tr><tr class="stats-row"> <td class="stats-title">栃木</td><td>30</td><td>58</td><td>44</td><td>11</td><td>19</td><td>2</td></tr> </tbody></table> |
via
jQuery Tutorial – Create a Flexible Data Heat Map
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
