使用图表.js中的数据表中的用户输入表创建折线图

我正在获取用户使用java脚本创建的用户输入表在其中添加数据。我从表中获取数据并尝试使用 chartjs 库绘制图表，但无法绘制图表。我已经尝试了以下内容，但我在表格的第一列中获得了画布 ID。我有点难倒。任何帮助表示赞赏。

<html>
<head>
<title>Index File</title   
</head>
<body>
<script src="dist/js/chartjs/Chart.min.js"></script>
<div id="POItablediv">
<p>
<input type="button" id="bt" value="Submit Data" onclick="submit()" />
</p>
<input type="button" onclick="insRow()" id="addPOIbutton" value="Add values"/><br/><br/>
<table id="POITable" border="1">
<thead>
<tr>
<td>WEEK NO</td>
<td>alpha</td>
<td>beta</td>
<td>Delete?</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox"/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
</tr>
<tbody>
</table>
<canvas id="pieChart"></canvas>

<script type="text/javascript">
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
if(i>1){
document.getElementById('POITable').deleteRow(i);
}
}

function insRow()
{
var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
function submit() 
{
var table = document.getElementById("POITable")
var tableLen = table.rows.length           
var data = {labels: [], alpha: [], beta: []
}
for (var i = 1; i < tableLen; i++) 
{
data.labels.push(table.rows[i].cells[0].innerText)
data.alpha.push(table.rows[i].cells[1].innerText.replace(',',''))
data.beta.push(table.rows[i].cells[2].innerText)
}
var canvasP = document.getElementById("pieChart")
var ctxP = canvasP.getContext('2d')
var myPieChart = new Chart(ctxP, {type: 'line',
data: 
{ 
labels: data.labels,
datasets: [{data: data.alpha,}]
},
options: {
legend: {
display: true,
position: "right"
}
}
});
}
</script>

我发现获取值的过程存在问题：传递给data.alpha的值和data.beta来自输入，而不是代码所示的td元素：

<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox"/></td>

获取值的模式不适用于输入字段，您必须获取value，而不是像这里所做的那样innerText：

data.alpha.push(table.rows[i].cells[1].innerText.replace(',',''))
data.beta.push(table.rows[i].cells[2].innerText)

应使用以下命令从输入中获取值：

data.alpha.push(table.rows[i].cells[1].childNodes[0].value.replace(',',''))
data.beta.push(table.rows[i].cells[2].childNodes[0].value)

使用childNodes返回父元素的所有子元素，在本例中为td标记。childNodes[0]返回父元素的第一个子元素，即input标记，然后childNodes[0].value返回输入字段的值。

您还可以将其替换为您正在使用的datasets以获得更友好的输出：

datasets: [{label: "Pie Chart", data: data.alpha, backgroundColor: "#138bc2", borderColor: "#777777"}]

label将显示在图表旁边，而不是显示的当前undefined值。backgroundColor和borderColor是不言自明的;)

相关内容

最新更新

热门标签：