首页 > 解决方案 > 在数据表单元格内插入细长条形图

问题描述

晚安朋友。出于某种原因,我可以将一个小图插入数据表单元格,我会发疯的。下面我展示代码:

$(document).ready(function() {
    var table = $('#example').DataTable( {
                "ajax": {
                "url": "http://llx/query?db=telegraf&q=SELECT 
LAST(cpu_used) AS cpu, LAST(mem_used) AS mem, LAST(load) AS load, 
LAST(disk_await) AS disk_await FROM custom  where time >= '2019-01- 
01' GROUP BY hostname ORDER BY time",
                "type": "GET",
                "dataType": "json",
                "cache": false,
                "contentType": "application/json; charset=utf-8",
                "dataSrc": "results.0.series[]"
                },
        deferRender: true,
        columns: [
            { data: 'tags.hostname' },
            { data: 'values.0.0',
            {data: 'values.0.1'},
            {data: 'values.0.2'},
            {data: 'values.0.3'},
            {data: 'values.0.4'},
            {'render': function(data, type, row meta) {
var sequence = "<span 
class='bar'>2,5,3,6,2,1</span>"
                       return sequence
                    }
                }
        ],
        rowId: 'extn',
        select: true,
        dom: 'Bfrtip',
        buttons: [
            {
                text: 'Actualizar tabla',
                action: function () {
                    table.ajax.reload();
                }
            }
        ]
    } );
} );

$(function() {
    $('span.bar').peity('bar')
})

出于某种原因,它只显示数据而不显示图表。

我用这个例子来指导我:

http://jsfiddle.net/Iarwain/zvhvpLum/?utm_source=website&utm_medium=embed&utm_campaign=zvhvpLum

标签: javascriptchartsdatatables

解决方案


你错过了数据表的一个重要部分...... - “渲染”

{var sequence = "<span class='bar'>2,5,3,6,2,1</span>"
                   return sequence
                }
            }

应该

"render": function(data, type, row, meta){
  {var sequence = "<span class='bar'>2,5,3,6,2,1</span>"
                   return sequence
                }
            }
}

推荐阅读