Question

我尝试做的是在数据表中渲染条形图。我正在使用Highchart和DataTable jquery插件。基本上我想做的就是这个。请看下面的链接。

我有3个列的表，其中一个列中有条形图。该表是可排序的，它具有分页以显示更多行。一切都很难过，有什么办法以某种方式循环图表系列并显示一个用于eatch行。

感谢您的帮助

Answer 1

我不打算使用外部库来创建图表，而是使用CSS代替。来自answer的这个Russriguez促使我查看您可能使用的CSS。这是一个基本的例子，似乎有效，它在JSFiddle上：

<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Languages</th>
            <th>Votes</th>
            <th>Positive/Neutral/Negative</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Languages</th>
            <th>Votes</th>
            <th>Positive/Neutral/Negative</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>English</td>
            <td>49</td>
            <td>
                <div class="bar-chart-bar">
                    <div class="bar bar1 bar-50"></div>
                    <div class="bar bar2 bar-20"></div>
                    <div class="bar bar3 bar-25"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>German</td>
            <td>33</td>
            <td>
                <div class="bar-chart-bar">
                    <div class="bar bar1 bar-25"></div>
                    <div class="bar bar2 bar-10"></div>
                    <div class="bar bar3 bar-12"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>French</td>
            <td>28</td>
            <td>
                <div class="bar-chart-bar">
                    <div class="bar bar1 bar-20"></div>
                    <div class="bar bar2 bar-20"></div>
                    <div class="bar bar3 bar-17"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td>Spanish</td>
            <td>16</td>
            <td>
                <div class="bar-chart-bar">
                    <div class="bar bar1 bar-22"></div>
                    <div class="bar bar2 bar-4"></div>
                    <div class="bar bar3 bar-10"></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

当然，如果您的数据不是那种格式，那么它可能很有趣，因为您需要在进行格式化时将其格式化。但是，如果是，那么你就会笑，只要你能够通过一点点的数学计算百分比......事实上，堆叠条形的内联CSS可能会让事情变得更轻松和苗条你的外部CSS。

修改

我开始考虑你的数据以及它是否采用这种格式：

<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Languages</th> <th>Positive</th> <th>Neutral</th> <th>Negative</th> </tr> </thead> <tbody> <tr> <td>English</td> <td>50</td> <td>20</td> <td>25</td> </tr> <tr> <td>German</td> <td>25</td> <td>10</td> <td>12</td> </tr> <tr> <td>French</td> <td>20</td> <td>20</td> <td>17</td> </tr> <tr> <td>Spanish</td> <td>22</td> <td>4</td> <td>10</td> </tr> </tbody> </table>

然后这对你有用：

$(function(){ $("#dTable").dataTable({ "columns": [ { "title":"Languages" }, { "title":"Votes", "render": function(data, type, row, meta){ return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10) } }, { "visible":false }, { "title": "Positive/Neutral/Negative", "sortable":false, "render": function(data, type, row, meta){ return $("<div></div>", { "class": "bar-chart-bar" }).append(function(){ var bars = []; for(var i = 1; i < row.length; i++){ bars.push($("<div></div>",{ "class": "bar " + "bar" + i }).css({ "width": row[i] + "%" })) } return bars; }).prop("outerHTML") } } ] }); });

减少CSS文件的附加好处; - ）

工作JSFiddle。

Answer 2

我从之前的解决方案派生出另一个。我的想法是使用Peity图表代替CSS代码。

相同的HTML代码

<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Languages</th>
        <th>Positive</th>
        <th>Neutral</th>
        <th>Negative</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>English</td>
        <td>50</td>
        <td>20</td>
        <td>25</td>
    </tr>
    <tr>
        <td>German</td>
        <td>25</td>
        <td>10</td>
        <td>12</td>
    </tr>
    <tr>
        <td>French</td>
        <td>20</td>
        <td>20</td>
        <td>17</td>
    </tr>
    <tr>
        <td>Spanish</td>
        <td>22</td>
        <td>4</td>
        <td>10</td>
    </tr>
</tbody>

Javascript略有不同，

$(function(){
$("#dTable").dataTable({
    "columns": [
            {
                "title":"Languages"
            },
            {
                "title":"Votes",
                "render": function(data, type, row, meta){
                    return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
                }
            },
            {
                "visible":false
            },
            {
                "title": "Positive/Neutral/Negative",
                "sortable":false,
                "render": function(data, type, row, meta){
                    var sequence = '<span class="donut">'
                                        for(var i = 1; i < row.length; i++){
                     sequence = sequence + parseInt(row[i], 10) + ',';
                   }

                   sequence = sequence + '</span>';                       
                   return sequence
                }
            }
    ]
});
});
$(function() {
    $("span.donut").peity("donut")
})

没有使用CSS。

指向Fiddle

的链接

如何在DataTable中显示条形图

2 个答案: