【发布时间】：2020-05-13 22:22:13
【问题描述】：
我正在使用用户使用 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>
【问题讨论】：
标签： javascript html chart.js