спарклайн это не функция - PullRequest
0 голосов
/ 09 февраля 2020

В настоящее время я сталкиваюсь с проблемой при использовании пакета под названием jQuery Sparklines от Gareth Watts . У кого-нибудь есть опыт работы с этим пакетом? Это выглядит довольно устаревшим, но, надеюсь, некоторые люди все еще используют его здесь.

Я получаю данные из вызова AJAX и пытаюсь создать таблицу со спарклайном в строке таблицы, а затем добавить ее в в ДОМ. Я получаю сообщение об ошибке при вызове функции sparkline.

Это происходит только когда я добавляю в DOM. Если span уже существует в DOM, он работает нормально.

Я проверил, правильно ли загружаются библиотеки jQuery и sparkline перед выполнением моего кода. Я не знаю, что происходит не так.

function createTable(tob) {
  for (var [module, focusDetails] of Object.entries(tob)) {
    var focusList = focusDetails.focusDetails;
    var divColumn = $('<div>').addClass('column');
    let divCard = $('<div>').addClass('card');
    let table = $('<table>').addClass('table table-striped');
    let thead = $('<thead>').addClass('thead');
    let trtitle = $('<tr>');
    let title = $('<b>').text(module);
    trtitle.append(title);
    thead.append(trtitle);
    
    let trHead = $('<tr>');
    let headRow = '<th></th><th>Tdy</th><th>Yda</th><th> % +/-</th><th>7 Days</th><th>Top Depts</th>';
    trHead.append(headRow);
    thead.append(trHead);
    table.append(thead);
    
    let tbody = $('<tbody>').addClass('tbody');
    
    for (var [focusName, focusRow] of Object.entries(focusList)) {
      let row = $('<tr>');
      let tdFocusName = $('<td>').text(focusName);
      let tdCountTday = $('<td>').text(focusRow.count_tdy);
      let tdCountYday = $('<td>').text(focusRow.count_ydy);
      let tdChart = $('<td>');
      let barchart = $('<span>&nbsp;</span>');   
      barchart.sparkline([1, 2, 3, 2], {
        type: 'bar'
      });
      //barchart.sparkline(focusRow.last7days, {type: 'bar'});
      
      tdChart.append(barchart);
      let tdLocation = $('<td>').text(focusRow.location_tdy);
      row.append(tdFocusName);
      row.append(tdCountTday);
      row.append(tdCountYday);
      row.append(tdChart);
      row.append(tdLocation);
      tbody.append(row);
    }

    table.append(tbody);
    divCard.append(table);
    divColumn.append(divCard);
    $("#chart-row").append(divColumn);
    $.sparkline_display_visible();
  }
}
...