javascript - 如何在数据表中显示条形图

Question

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

Chart in Table

我有一个包含 3 列的表格，其中一列中有条形图。该表是可排序的，并且具有分页功能以显示更多行。令人悲伤的是，有什么方法可以以某种方式循环图表系列并为每一行显示一个图表系列。

感谢您的帮助

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 < Object.keys(row).length; i++){
                                bars.push($("<div></div>",{
                                    "class": "bar " + "bar" + i
                                }).css({
                                    "width": row[i] + "%"
                                }))
                            }
                            return bars;
                        }).prop("outerHTML")
                    }
                }
        ]
    });
});

还有瘦身 CSS 文件的额外好处;-)

工作中JSFiddle .