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

Posted

技术标签:

【中文标题】从 javascript 将迷你图饼图添加到 Jquery DataTable【英文标题】:Add sparklines pie chart to Jquery DataTable from javascript 【发布时间】:2021-08-19 09:40:21 【问题描述】:

我正在尝试使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,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'
        ]
    );

【问题讨论】:

【参考方案1】:

我将类添加到我的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'
    );

【讨论】:

这是解决您问题的方法吗?如果是这样,那就太好了! - 但也许你可以编辑你的答案并提供几句话来解释它是如何解决问题的。 @andrewjames 是的。好的 您需要编辑您的答案,而不是您的问题。

以上是关于从 javascript 将迷你图饼图添加到 Jquery DataTable的主要内容,如果未能解决你的问题,请参考以下文章

jquery实现柱形图饼图等

echart 折线图柱状图饼图环形图颜色修改

OpenGL——折线图柱状图饼图绘制

数据可视化分析(柱状图饼图折线图雷达图)

Android画折线图柱状图饼图(使用achartengine.jar)

利用echarts highcharts 实现自定义地图 关系图效果 侧边3D柱形图饼图散点图