How to display a Bar Chart in DataTable

问题

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.

Chart in Table

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.

Thanks for the help

回答1:

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>

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.

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 ;-)

Working JSFiddle.

回答2:

I derived from previous solution another one. My idea is use Peity charts instead CSS code.

Same HTML Code

<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>

And the Javascript is slighty different,

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

No CSS is used.

a link to Fiddle

来源：https://stackoverflow.com/questions/30997562/how-to-display-a-bar-chart-in-datatable

标签

javascript

jquery

charts

Highcharts

datatable