Вставьте гистограмму Пити в ячейку с данными

Question

Спокойной ночи, друзья. Я схожу с ума, пытаясь вставить диаграмму состояния в ячейку с данными, по какой-то причине я могу это сделать. Ниже я показываю код:

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

Answer 1

Я думаю, вам нужна функция drawCallback для вызова вашей диаграммы благочестия. Поэтому каждый раз, когда таблица перерисовывается, она создает диаграмму. Больше информации здесь: https://datatables.net/reference/option/drawCallback

EDIT

После перехода по ссылке на пример и попытки создания бара возникла проблема с запятыми в строке в пределах диапазона. Я обновил JSFiddle в этом примере, чтобы он работал ... Единственное, о чем я могу думать, это то, что строка, возвращаемая в функции рендеринга, не совсем верна:

"render": function(data, type, row, meta) {
    var arr = []
    for (var i = 1; i < row.length; i++) {
        arr.push(parseInt(row[i], 10));
    }
    return `<span class="bar">${arr.join(",")}</span>`
}

Полагаю, нужно также проверить, что вы также включили библиотеку благочестия на своей странице. Если вы отметите этот JSFiddle , вы увидите, что панель работает.

Есть ли какие-либо сообщения в консоли и как выглядит разметка в вашей ячейке?

Answer 2

вы пропустили важную часть таблицы данных .... - 'render'

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