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

问题描述：

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

What im try to do is to render bar chart in datatable. I'm using Highchart and DataTable jquery plugins. Basicly what i want to do is this. Take a look at the link below.

表中的图表

我有3栏的表格，其中一栏有条形图.该表是可排序的，并且具有分页以显示更多行.所有人都很难过，有什么办法可以循环遍历图表系列并为显示行显示一个.

I have table with 3 colums and one of the columns has Bar Chart in it. The table is sortable and it has paging to display more rows. With all being sad is there any way to somehow loop trought the chart series and display one for eatch row.

感谢您的帮助

答

我不会费心使用外部库来创建图表，而是使用CSS.来自 answer ="http://forums.asp.net/members/Russriguez.aspx" rel ="nofollow noreferrer"> Russriguez 提示我看一下您可能使用的CSS.这是一个似乎可行的基本示例，它位于 JSFiddle :

I wouldn't bother with an external library to create the chart but use CSS instead. This answer from Russriguez prompted me to look at the CSS you might use. This is a basic example which seems to work and it's on 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变得更苗条.

Of course, if your data isn't in that format, it could be interesting as you'll need to format it as you go along. But if it is then you're laughing, as long as you're able to do a wee bit of math to work out the percentages... in fact inline CSS for the stacked bars might make things easier and slim your external CSS.

编辑

我必须考虑您的数据以及它是否采用以下格式:

I got to thinking about your data and if it's in this format:

<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文件的额外好处；-)

With the added benefit of slimming your CSS file ;-)

正在工作 JSFiddle .

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

相关推荐