Блог

Я пытаюсь сделать sparklines так, чтобы круговые диаграммы отображались JQuery Datatables динамически. Я могу добавить JQuery sparklines piechart в JQuery DataTable вот так:

                                                     <table id="dt-basic-example"
                                                       class="table table-bordered table-hover table-striped w-100">
                                                    <thead>
                                                    <tr>
                                                        <th>pie_chart</th>
                                                     
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                             <span class="sparklines" sparkType="pie" sparkHeight="50" sparkWidth="auto" values="4,6,7,7,4"> </span>
                                                            </td> 
                                                        </tr>
                                                    </tbody>
                                                </table>
 

Как я могу добавить ту же круговую диаграмму, когда $(document).ready() ?

Я попробовал это, но это не сработало:

     var myData = [
    {
        pie_chart: '<span class="sparklines" sparkType="pie" sparkHeight="50" sparkWidth="auto" values="4,6,7,7,4"> </span>'
    }
];


$(function () {
    $('#dt-basic-example').dataTable({
        data: myData,
        columns: [
            {data: 'pie_chart'}
        ]
    });
 

Я добавил класс в свой sparkline элемент и перерисовал его с новыми значениями.

 var myData = [
    {
        pie_chart: '<span class="sparklines top10" sparkType="pie" sparkHeight="50" sparkWidth="auto" values="4,6,7,7,4"> </span>'
    },



        $('#dt-basic-example').dataTable({
        data: myData,
        columns: [
            {data: 'pie_chart'},
        ],
        responsive: true,
        searching: false,
        paging: false,
        info: false
    });
    $('.top10').sparkline([1, 2, 3, 4], {
        type: 'pie',
        height: '50',
        width: '50'
    });