谁能帮忙解决这个问题?
我正在使用 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
}
关于javascript - 如何从 chart.js 的 html 表中动态添加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17869827/