如何从chart.js的html表中动态添加元素

How to add the elements dynamically from the html table for chart.js

本文关键字:动态 添加 元素 html chart js      更新时间:2023-09-26

有人能帮助解决这个问题吗?

我正在使用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);

上面的操作很好,因为在数据集中,我对数据集中的元素数量进行了硬编码,但实际上这应该检查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
             }

我试了好几次,但都没能找到解决办法。

您需要将每一行传递给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
}