javascript - 如何在数据表中显示条形图(How to display a Bar Chart in DataTable)

Question

What im try to do is to render bar chart in datatable.

(我试图做的是在数据表中渲染条形图。)

I'm using Highchart and DataTable jquery plugins.

(我正在使用Highchart和DataTable jQuery插件。)

Basicly what i want to do is this.

(基本上我想做的就是这个。)

Take a look at the link below.

(看一下下面的链接。)

Chart in Table

(表中的图表)

I have table with 3 colums and one of the columns has Bar Chart in it.

(我有3栏的表格，其中一栏有条形图。)

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.

(所有人都很难过，有什么办法可以循环遍历图表系列并为显示行显示一个。)

Thanks for the help

(谢谢您的帮助)

  ask by sddpz translate from so

Answer 1

I wouldn't bother with an external library to create the chart but use CSS instead.

(我不会费心使用外部库来创建图表，而是使用CSS。)

This answer from Russriguez prompted me to look at the CSS you might use.

(来自Russriguez的 回答提示我看一下您可能使用的CSS。)

This is a basic example which seems to work and it's on JSFiddle :

(这是一个似乎有效的基本示例，它在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>

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.

(但是，如果是那样的话，那是您在笑，只要您能够做一点点的数学运算就可以得出百分比……实际上，用于堆叠条形图的内联CSS可能会使事情变得更容易并使外部CSS变薄。)

EDIT

(编辑)

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>

Then this will work for you:

(然后这将为您工作：)

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

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

(有了瘦身CSS文件的额外好处；-))

Working JSFiddle .

(工作中的JSFiddle 。)