Javascript 如何在DataTable中显示条形图

我尝试做的是在datatable中呈现条形图。我正在使用Highchart和DataTable jquery插件。基本上我想做的就是这样。请看下面的链接

我有一张3列的表格，其中一列有条形图。该表是可排序的，它具有分页功能以显示更多行。所有令人悲伤的是，是否有任何方法可以循环trought图表系列并为eatch行显示一个

---

感谢您的帮助

我不需要使用外部库来创建图表，而是使用CSS。这促使我研究一下您可能使用的CSS。这是一个基本的例子，它似乎是有效的：

语言文字
投票
正极/中性/负极
语言文字
投票
正极/中性/负极
英语
49
德国的
33
法语
28
西班牙的
16

当然，如果您的数据不是那种格式，那么它可能会很有趣，因为您需要在处理过程中对其进行格式化。但是如果是这样的话，你就笑了，只要你能做一点数学计算出百分比。。。事实上，用于堆叠条的内联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>

语言文字
肯定的
中立的
消极的
英语
50
20
25
德国的
25
10
12
法语
20
20
17
西班牙的
22
4.
10

那么这将对您有效：

$(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")
                    }
                }
        ]
    });
});

$（函数（）{
$（“#dTable”）.dataTable({
“栏目”：[
{
“title”：“语言”
},
{
“标题”：“投票”，
“呈现”：函数（数据、类型、行、元）{
返回parseInt（第[1]行，第10行）+parseInt（第[2]行，第10行）+parseInt（第[3]行，第10行）
}
},
{
“可见”：错误
},
{
“标题”：“正面/中性/负面”，
“可排序”：false，
“呈现”：函数（数据、类型、行、元）{
返回$（“”）{
“类”：“条形图条形图”
}).append（函数（）{
var条=[]；
for（var i=1；i

还有一个好处就是精简CSS文件；-）

---

正在工作。

我不需要使用外部库来创建图表，而是使用CSS。这促使我研究一下您可能使用的CSS。这是一个基本的例子，它似乎是有效的：

语言文字
投票
正极/中性/负极
语言文字
投票
正极/中性/负极
英语
49
德国的
33
法语
28
西班牙的
16

当然，如果您的数据不是那种格式，那么它可能会很有趣，因为您需要在处理过程中对其进行格式化。但是如果是这样的话，你就笑了，只要你能做一点数学计算出百分比。。。事实上，用于堆叠条的内联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>

语言文字
肯定的
中立的
消极的
英语
50
20
25
德国的
25
10
12
法语
20
20
17
西班牙的
22
4.
<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>

$(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")
})