将迷你图饼图从 javascript 添加到 Jquery DataTable

问题描述

我正在尝试使 sparklines 饼图在 JQuery Datatables 中动态呈现。我可以像这样将 JQuery sparklines 饼图添加到 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,4"> </span>
                                                            </td> 
                                                        </tr>
                                                    </tbody>
                                                </table>

如何在 $(document).ready() 时添加相同的饼图？

我试过了，但没有用：

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


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

解决方法

我向 sparkline 元素添加了 class 并使用新值重新绘制它。

var myData = [
    {
        pie_chart: '<span class="sparklines top10" sparkType="pie" sparkHeight="50" sparkWidth="auto" values="4,6,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'
    });