从HTML上的字段更新CanvasJS图表
从HTML上的字段更新CanvasJS图表
提问于 2014-03-06 06:02:02
我已经构建了一个简单的图表，我想从HTML表单上的字段中更新它。当我输入“硬编码”数字时，我可以让图形呈现出来--但是当我尝试使用变量声明时，它就不起作用了。
我也想把图表重新渲染一下.
我知道你们都会因为这件事的简单而摇头，而我也很可能会--在别人告诉我我做错了什么或者没有做什么之后。
无论如何，这是三个字段和图形的代码(您会注意到，我在“dataPoints：”下使用了变量"q“、"c”和"b“)：
<!DOCTYPE HTML>
<form>
<label for="QSUMTOT">QSUMTOT entry:</label>
<input id='QSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<label for="CSUMTOT">CSUMTOT entry:</label>
<input id='CSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<label for="BSUMTOT">BSUMTOT entry:</label>
<input id='BSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
<div id="chartContainer" style="height: 300px; width: 400px;"></div>
</form>
<script type="text/javascript" src="assets/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var q = document.getElementById("QSUMTOT").value;
var c = document.getElementById("CSUMTOT").value;
var b = document.getElementById("BSUMTOT").value;
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Graphic results of Analysis"
},
data: [//array of dataSeries
{ //dataSeries object
type: "column",
dataPoints: [
{ label: "Quality System", y: q },
{ label: "Compliance", y: c },
{ label: "Business", y: b }
]
}
]
});
chart.render();
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-02 06:24:13
偶然发现了答案：
function summary(){
var qSumTot = document.getElementById("QTOT").value;
var cSumTot = document.getElementById("CTOT").value;
var bSumTot = document.getElementById("BTOT").value;
var q = qSumTot.substring(0, qSumTot.length -1);
var c = cSumTot.substring(0, cSumTot.length -1);
var b = bSumTot.substring(0, bSumTot.length -1);
var analTot = [q * 1, c * 1, b * 1]
var str = document.getElementById('SUMTOT').value;
var rstr = str.substring(0, str.length - 1);
var qms = analTot[0];
var comp = analTot[1];
var bus = analTot[2];
document.getElementById("QSUMTOT").value = qSumTot;
document.getElementById("CSUMTOT").value = cSumTot;
document.getElementById("BSUMTOT").value = bSumTot;
document.getElementById('SUMTOT').value = (parseInt(((q*1) + (c*1) + (b*1))/3) + "%");
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Graph of Analysis"
},
axisY:{
suffix: "%"
},
data: [{
type: "column",
toolTipContent: "{y}%",
dataPoints: [{
label: "QMS",
y: qms
}, {
label: "Compliance",
y: comp
}, {
label: "Business",
y: bus
}]
}]
});
chart.render();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22216315
复制相关文章
相似问题
腾讯云开发者
