如何将值从文本字段显示到柱形图

时间:2018-02-08 19:08:48

标签: javascript html charts

我想将文本字段中的值显示到柱形图,我下载了此网站中图表的代码(https://canvasjs.com/javascript-charts/)。 我在下面使用了这段代码但没有任何反应请帮帮我!



<script>
window.onload = function () {
var n1 = document.getElementById('FE');
var n2 = document.getElementById('SE');
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Average score per Evaluation"
	},
	axisY: {
		title: "FM performance score"
	},
	data: [{        
		type: "column",  
		dataPoints: [      
			{ y: n1.value, label: "Faculty Self-Evaluation" },
			{ y: n2.value, label: "Students' Evaluation" }
		]
	}]
});
chart.render();
}
</script>
&#13;
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
 
 <input name="FE" id="FE" type="text" value="4.06" >
 <input name="SE" id="SE" type="text" value="5.05" >

<div id="chartContainer"></div>
                        
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

该值需要作为float

传递

在dataPoints对象中使用它

dataPoints: [      
            { y: parseFloat(n1.value), label: "Faculty Self-Evaluation" },
            { y: parseFloat(n2.value), label: "Students' Evaluation" }
        ]