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

问题描述

任何一个帮助这个问题。

我使用chart.js开发图表到我的asp.net mvc C＃应用程序。

问题是我无法从html表动态添加元素到图表

  < canvas id =myChartwidth =600height =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函数我已经遵循以下代码）
 
 var data：
 {
 
数据集：getdata（）
} 
 
函数getdata（'tbody'）[0] .getElementsByTagName（'tr'）。length; getDetails（'t''）; getElementsByTagName（' 
 
 for（i = 0; i< rows; i ++）
 {
 datasetdata [i] = [
 {
 fillColor：getrandomfillcolor 
 
 strokeColor：getrandomstrokecolor（），
 
 data：getcountdata（）
 
}] 
} 
 
 
 function getrandomfillcolor（）
 {
} 
 
 function getrandomstrokecolor（）
 {
} 
 
 function getcountdata （）
 {
} 
 
 
 
返回datasetdata 
 
 
} 
  
 
 
 
我已经尝试过几次，但是找不到解决方案。
 
 
   
 pre>  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 b $ b {
 //根据需要创建数据
} 
  

Any one help with this issue .

I am using chart.js for developing charts into my asp.net mvc C# application.

The issue is i am unable to add the elements dynamically from the html table to the chart

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

**THE ABOVE IS WORKING FINE BECAUSE IN DATASETS I AM HARDCODING THE NUMBER OF ELEMENTS IN DATASETS ,BUT IN REALITY THIS SHOULD CHECK THE HTML TABLE AND GET THE DATA FROM THE TABLE.

Now the question is how can i make the datasets to get dynamic values based on the number of rows in the table**

For example i have written a javascript function ( i HAVE TRIED THE FOLLOWING CODE)

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


             }

I have tried several times but was not able to find a solution for this .

解决方案

You need to pass each row to getcountdata() function

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
}

这篇关于如何从chart.js的html表中动态添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！