2列数据比较图表

Two-column data comparison

图表

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1690
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var twoColComp = {
    init: function() {
        var tables = document.getElementsByTagName('table');

// for each table
        for (var i = 0; i < tables.length; i++) {
            // don't process one that's already been done (has class two-column-comp)
            if (new RegExp('(^| )two-column-comp( |$)', 'gi').test(tables[i].className)) {
                return;
            }

//TODO: need to verify cross-browser support of these vars
            var h = tables[i].clientHeight,
                t = tables[i].getBoundingClientRect().top,
                wT = window.pageYOffset || document.documentElement.scrollTop,
                wH = window.innerHeight;

if (wT + wH > t + h / 2) {
                this.make(tables[i]);
            }
        }
    },

make: function(el) {
            var rows = el.getElementsByTagName('tr'),
                vals = [],
                max,
                percent;

// for each row in the table, get vals
            for (var x = 0; x < rows.length; x++) {
                var cells = rows[x].getElementsByTagName('td');
                for (var y = 1; y < cells.length; y++) {
                    vals.push(parseInt(cells[y].innerHTML, 10));
                }
            }

max = Math.max.apply(Math, vals);
            percent = 100 / max;

//for each row in the table, apply vals
            for (x = 0; x < rows.length; x++) {
                var cells = rows[x].getElementsByTagName('td');
                for (var y = 1; y < cells.length; y++) {
                    var currNum = parseInt(cells[y].innerHTML, 10);
                    cells[y].style.backgroundSize = percent * currNum + "% 100%";
                    cells[y].style.transitionDelay = x / 20 + "s";
                }
            }
            //add a class so you don't process it a bunch of times
            el.className = +" two-column-comp"
        } // end make
}

window.onload = function() {
    twoColComp.init();
}

window.onscroll = function() {
    twoColComp.init();
}

编译

CSS

body {
    font-family: sans-serif;
    max-width: 60em;
    margin: auto;
    padding: 1em;
}
table {
    width: 100%;
    background: #eee;
    padding: 1em;
    margin: 1em auto;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
th {
    font-size: 1.2em
}
td {
    font-weight: bold;
    border-bottom: 1px solid #fbfbfb;
    width: 20%;
    padding: .5em .25em;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    -webkit-transition: all .75s ease-out;
    -moz-transition: all .75s ease-out;
    transition: all .75s ease-out;
}
td:nth-child(2) {
    width: 40%;
    color: white;
    text-shadow: 1px 2px #222;
    text-align: right;
    background-image: -webkit-linear-gradient(to left, green, green);
    background-image: -moz-linear-gradient(to left, green, green);
    background-image: linear-gradient(to left, green, green);
    background-position: right top;
}
td:nth-child(3) {
    width: 40%;
    color: white;
    text-shadow: 1px 2px #222;
    background-image: -webkit-linear-gradient(right, gray, gray);
    background-image: -moz-linear-gradient(right, gray, gray);
    background-image: linear-gradient(right, gray, gray);
    background-position: left top;
}

HTML

<h1>Two-column data comparison</h1>
<table>
    <tr>
        <th></th>
        <th>2014</th>
        <th>2015</th>
    </tr>
    <tr>
        <td>Value A</td>
        <td>2</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Value B</td>
        <td>3</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Value C</td>
        <td>7</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Value D</td>
        <td>10</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Value E</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Value F</td>
        <td>11</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Value G</td>
        <td>15</td>
        <td>9</td>
    </tr>
    <tr>
        <td>Value H</td>
        <td>18</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Value I</td>
        <td>17</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Value J</td>
        <td>20</td>
        <td>12</td>
    </tr>
</table>

<h2>Another table (scroll down)</h2>

<table>
    <tr>
        <th></th>
        <th>2014</th>
        <th>2015</th>
    </tr>
    <tr>
        <td>Value K</td>
        <td>5</td>
        <td>18</td>
    </tr>
    <tr>
        <td>Value L</td>
        <td>6</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Value M</td>
        <td>24</td>
        <td>11</td>
    </tr>
    <tr>
        <td>Value N</td>
        <td>3</td>
        <td>17</td>
    </tr>
    <tr>
        <td>Value O</td>
        <td>9</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Value P</td>
        <td>7</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Value Q</td>
        <td>36</td>
        <td>13</td>
    </tr>
    <tr>
        <td>Value R</td>
        <td>6</td>
        <td>3</td>
    </tr>
</table>

<h2>And a third table</h2>

<table>
    <tr>
        <th></th>
        <th>2014</th>
        <th>2015</th>
    </tr>
    <tr>
        <td>Value S</td>
        <td>45</td>
        <td>188</td>
    </tr>
    <tr>
        <td>Value T</td>
        <td>16</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Value U</td>
        <td>67</td>
        <td>113</td>
    </tr>
    <tr>
        <td>Value V</td>
        <td>99</td>
        <td>46</td>
    </tr>
    <tr>
        <td>Value W</td>
        <td>135</td>
        <td>54</td>
    </tr>
    <tr>
        <td>Value X</td>
        <td>45</td>
        <td>76</td>
    </tr>
    <tr>
        <td>Value Y</td>
        <td>79</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Value Z</td>
        <td>34</td>
        <td>39</td>
    </tr>
</table>

Two-column data comparison

图表

编辑器支持Emmet

快捷键

Two-column data comparison

图表

ZingChart.js 大数据可视化图表插件使用示例

JS图表（Charts）插件性能测试

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：