Hinzufügen von Sparkline-Diagramm zu dynamisch aufgefüllten HTML-Tabelle

Ich versuche, eine sparkline chart am Ende jeder Zeile meiner dynamisch bevölkerten Tabelle hinzuzufügen. Hier ist mein Code:Hinzufügen von Sparkline-Diagramm zu dynamisch aufgefüllten HTML-Tabelle

function populateOverallOverview(result){ 
    var table = document.getElementById("firstTabOverall"); 

    function addCell(tr, text) { 
     var td = tr.insertCell(); 
     td.textContent = text; 
     return td; 
    } 

    result.forEach(function (item) { 
     // sparkline chart here 
     var dataSpan = document.createElement('span'); 
     dataSpan.sparkline(amountData, { 
     type: 'bar', 
     barColor: '#191919'}); 

     var row = table.insertRow(); 
     addCell(row, item.category); 
     addCell(row, '$ ' + item.currentMonthAmt.toFixed(2)); 
     addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')'); 
    }); 

}

Beispieldaten für die amountData sind [5,6,7,2,0, -4, -2,4]. Meine HTML-Tabelle:

Ich versuche, das Sparkline-Diagramm dynamisch zu erstellen und dann an das Ende der Zeile hinzuzufügen. Allerdings erhalte ich diese Fehlermeldung:

Uncaught (in promise) TypeError: dataSpan.sparkline is not a function

ich nicht sicher, wie dynamisch eine Spanne mit ID erstellen, dann diese ID verwenden, um .sparkline. Irgendwelche Ideen?

Quelle

2017-09-12 hyperfkcb

Könnten Sie gleichen Daten für 'result' und den HTML-Code Sie ausgeben möchten hinzufügen. –

@BrahmaDev Hallo Ich habe die Frage bearbeitet! – hyperfkcb

$(document).ready(function() { 
 
    var amountData = [5, 6, 7, 2, 0, -4, -2, 4]; 
 

 
    function populateOverallOverview(result) { 
 
     var table = document.getElementById("firstTabOverall"); 
 

 
     function addCell(tr, text) { 
 
      var td = tr.insertCell(); 
 
      td.textContent = text; 
 
      return td; 
 
     } 
 

 
     result.forEach(function(item) { 
 
      var row = table.insertRow(); 
 
      addCell(row, item.category); 
 
      addCell(row, '$ ' + item.currentMonthAmt.toFixed(2)); 
 
      addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')'); 
 

 
      var lastCell = addCell(row, ""); //Added blank cell for sparkline 
 

 
      var dataSpan = $("<span>"); 
 
      dataSpan.appendTo(lastCell); 
 
      dataSpan.sparkline(amountData, { 
 
       type: 'bar', 
 
       barColor: '#191919' 
 
      }); 
 
     }); 
 

 
    } 
 

 
    populateOverallOverview([{ 
 
     category: "Transportation", 
 
     currentMonthAmt: 1, 
 
     topMonthStr: 1, 
 
     topAmount: 1 
 
    }, { 
 
     category: "Healthcare", 
 
     currentMonthAmt: 1, 
 
     topMonthStr: 1, 
 
     topAmount: 1 
 
    }]); 
 
});

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <table id="firstTabOverall" class="table" style="font-size:13px"> 
 
     <tr> 
 
      <th>Category</th> 
 
      <th>Current Month Revenue</th> 
 
      <th colspan=2>Best Selling Month</th> 
 
     </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Quelle

2017-09-12 10:39:45

Dies ist eine gute Implementierung @Brahma Dev, vielleicht was ich versuchte, die ganze Zeit zu überreden +1: – Winnie

@BrahmaDev Cool Vielen Dank !!! – hyperfkcb

Die Fehlermeldung nicht, dass span-Element vorschlägt erstellt wird oder nicht, sagen, es ist der Code nicht in der Lage ist sparkline Funktion zu finden, um dieses Problem zu beheben bitte sicher, dass

, die Sie aufgenommen haben jquery.sparkline.js in Ihrer Seite, dh die JavaScript-Datei für Sparkline ist vorhanden.
Beachten Sie auch die Reihenfolge, in der Sie jQueryjquery und jquery.sparkline.js, erste Last und dann sparkline

Beachten Sie auch, dass die jquery selector immer ein Array-ähnlichen jquery Objekt geladen, die von dem Element unterscheidet kehrte von JavaScript createElement()

Was ich sagen:

var dataSpan = document.createElement('span'); 
dataSpan.sparkline(...)

unterscheidet sich von

$("#sparkline").sparkline(...)

vorschlagen Sie dynamisch Element von jQuery hinzugefügt retrieve und dann sparkline Diagramm erstellen.

Oder nach dem Element gesetzt ID-Attribut wie folgt zu erstellen

dataSpan.setAttribute("id", "yourRandomDynamicIdHere"); 
$("#yourRandomDynamicIdHere").sparkline(...)

hoffe, das hilft!

Quelle

2017-09-12 09:37:28 Winnie

Hi Ich habe es geschafft, eine Dummy-Sparkline zu erstellen, indem ich sie hartkodiere: $ ("# sparkline"). Sparkline ([5,6,7,2,0, -4, -2,4], { typ: 'bar' , barColor: '# 191919'}); Wenn ich jedoch versuchte, es dynamisch als den Code oben zu erstellen, warf es mich diese Fehlermeldung – hyperfkcb

Kannst du eine Geige teilen? – Winnie

Haben Sie eine Idee, wie Sie die ID eines dynamisch erstellten Elements tatsächlich abrufen können? – hyperfkcb

Hinzufügen von Sparkline-Diagramm zu dynamisch aufgefüllten HTML-Tabelle

Antwort

Verwandte Themen