chart.js의 html 테이블에서 요소를 동적으로 추가하는 방법

Question

누구든지이 문제를 해결할 수 있습니까?

나는 asp.net mvc C# 응용 프로그램으로 차트를 개발하기 위해 chart.js를 사용하고 있습니다.

문제는 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 테이블을 확인해야하고 테이블에서 데이터를 얻을.

이제 테이블의 행 수를 기반으로 동적 값을 가져 오기 위해 데이터 집합을 만들 수 있습니까? 나는 자바 스크립트 함수를 작성한 예를 들어

는 (I는 다음과 남녀 공학을 시도) : 나는 여러 번 시도했지만 이것에 대한 해결책을 찾을 수 없습니다했다

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 

      } 

. getrandomfillcolor() 은, strokeColor : getrandomstrokecolor()

Answer 1

당신은

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 
}