2

誰でもこの問題を解決できますか?

私の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);

データセットでは、データセット内の要素の数をハードコーディングしているため、上記は正常に機能していますが、実際には、これは HTML テーブルをチェックし、テーブルからデータを取得する必要があります。

ここでの問題は、テーブルの行数に基づいて動的な値を取得するようにデータセットを作成するにはどうすればよいかということです。

たとえば、私は Javascript 関数を作成しました (次の coed を試しました)。

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

             }

何度か試しましたが、これに対する解決策を見つけることができませんでした。

4

1 に答える 1

0

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
}
于 2013-07-25T22:44:40.303 に答える