如何在DataTable中显示条形图

How to display a Bar Chart in DataTable

本文关键字：显示 条形图 DataTable      更新时间：2023-09-26

我想做的是在数据表中呈现条形图。我使用的是Highchart和DataTablejquery插件。基本上我想做的就是这个。请查看下面的链接。

表中的图表

我有一个有3列的表，其中一列有条形图。这个表是可排序的，它有显示更多行的页面。令人难过的是，有没有办法以某种方式循环遍历图表系列并为每一行显示一个。

感谢的帮助

我不会使用外部库来创建图表，而是使用CSS。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 < Object.keys(row).length; i++){
                                bars.push($("<div></div>",{
                                    "class": "bar " + "bar" + i
                                }).css({
                                    "width": row[i] + "%"
                                }))
                            }
                            return bars;
                        }).prop("outerHTML")
                    }
                }
        ]
    });
});

增加了精简CSS文件的好处；-）

工作JSFiddle。

我从以前的解决方案派生了另一个解决方案。我的想法是使用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 的链接

相关文章：