ダイナミックにポピュレートされたHTMLテーブルにスパークラインチャートを追加する

動的に取り込まれたテーブルの各行の最後にsparkline chartを追加しようとしています。ここに私のコードは次のとおりです。amountDataためダイナミックにポピュレートされたHTMLテーブルにスパークラインチャートを追加する

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) + ')'); 
    }); 

}

サンプルデータ[5,6,7,2,0、-4、-2,4]です。私のHTMLテーブル：

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

スパークラインチャートを動的に作成して行の最後に追加しようとしています。しかし、このエラーメッセージが表示されています：

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

IDを持つスパンを動的に作成する方法がわかりません。そのIDを.sparklineに使用します。何か案は？

出典

2017-09-12 hyperfkcb

あなたは 'result'、あなたが出力するHTMLのために同じデータを追加することができます。 –

@BrahmaDevこんにちは私は質問を編集しました！ – 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>

出典

2017-09-12 10:39:45

これは良い実装です@Brahma Dev、おそらく私がコンベリー+1しようとしていたもの： – Winnie

@BrahmaDevとても感謝します。 – hyperfkcb

エラーメッセージは、そのspan要素が作成またはされていない、それは言うコードです示唆していないこの問題を解決するために、sparkline機能を見つけることができないことを確認してください：あなたが含まれている

をあなたのページにjquery.sparkline.jsがあります。すなわち、スパークラインのJavaScriptファイルが存在します。
またjquery selectorは常に要素が異なる配列のようなjqueryオブジェクトを返すことに注意してください。また
、あなたがjqueryと jquery.sparkline.jsをロードしていた順序に注意を払う最初のロードjQuery、その後sparkline

JavaScript createElement()

によって返された何私が言うことを意味することは次のとおりです。

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

は

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

異なっているあなたはjQueryによって動的に追加された要素を取得し、sparklineチャートを作成して提案します。

あるいは、

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

・ホープこのことができますが、以下のように要素を作成した後、ID属性を設定！

出典

2017-09-12 09:37:28 Winnie

こんにちは、私はそれをハードコーディングしてダミーのスパークラインを作成することができました：$（ "＃sparkline"）sparkline（[5,6,7,2,0、-4、-2,4]、{ type： 'bar' 、 barColor： '＃191919'}）;しかし、私は上記のコードとして動的に作成しようとしたとき、それは私にそのエラーメッセージを投げた – hyperfkcb

あなたはフィドルを共有することはできますか？ – Winnie

動的に作成された要素のIDを実際に取得する方法はありますか？ – hyperfkcb

ダイナミックにポピュレートされたHTMLテーブルにスパークラインチャートを追加する

答えて

関連する問題