如何從chart.js的html表中動態添加元素

Question

任何人都可以幫助解決這個問題嗎？

我使用chart.js開發圖表到我的asp.net mvc C＃應用程序。

問題是我無法動態地從html表中添加元素到圖表。

<canvas id="myChart" width="600" height="400"></canvas> //html5 canvas  
    <script type="text/javascript">  
      var ctx = document.getElementById("myChart").getContext("2d");  
      var data = {         
       datasets: [  
          { 
           fillColor: "rgba(223,104,27,0.5)",  
           strokeColor: "rgba(220,220,220,1)",  
           data: getcountdata1()  
          },  
          {  
           fillColor: "rgba(151,187,205,0.5)",  
           strokeColor: "rgba(151,187,205,1)",  
           data: getcountdata2()  
          }]  
    myNewChart = new Chart(ctx).Line(data, options); 

以上工作正常，becausse的數據集，我在硬編碼的數據集元素的數量，但在現實中，這個應該檢查HTML表，從表中獲取數據。

現在的問題是如何使數據集獲取基於表中行數的動態值？

比如我寫了一個JavaScript函數（我曾嘗試以下男女同校）：

var data: 
{    
datasets: getdata() 
} 

function getdata() 
{ 
rows = document.getElementById('tblresult').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;  
for(i=0;i<rows;i++) 
{ 
    datasetdata[i] = [ 
      { 
       fillColor: getrandomfillcolor(),  
       strokeColor: getrandomstrokecolor(),  
       data: getcountdata() 

      }] 
} 

function getrandomfillcolor() 
{ 
} 

function getrandomstrokecolor() 
{ 
} 

function getcountdata() 
{ 
} 

return datasetdata 

      } 

我已經試了好幾次，但沒有能夠找到一個解決方案。

Answer 1

，需要在每個行傳遞給getcountdata()功能

rowsDomElements = document.getElementById('tblresult').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); 

for(i=0;i<rowsDomElements.length;i++) 
{ 
    datasetdata[i] = [ 
    { 
     fillColor: getrandomfillcolor(), 
     strokeColor: getrandomstrokecolor(), 
     data: getcountdata(rowsDomElements[i]) 
    }] 
} 

function getcountdata(row) 
{ 
    //create data as needed 
}