我在页面上使用Shield UI图表,用户可以在该页面上输入3个值,这些值在图表上显示。我有一个触发事件的按钮。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css">
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
<script>
function myFunction()
{
var containter = $("#chart").swidget();
var info = new Array();
info[0]=parseFloat(document.getElementById("a").value);
info[1]=parseFloat(document.getElementById("b").value);
info[2]=parseFloat(document.getElementById("c").value);
containter.destroy();
$("#chart").shieldChart(
{
seriesSettings: {
line: {
applyAnimation: {
duration: 0
},
pointMark: {
enabled: false
}
}
},
tooltipSettings: {
enabled: false
},
exportOptions:
{
image: false,
print: false
},
axisX: {
min: 0,
max: 5
},
primaryHeader: {
text: "Chart"
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'chart',
data: [info[0],info[1],info[2]]
}
]
}
);
}
</script>
</head>
<body>
<button onclick="myFunction()">Refresh Chart</button>
<table>
<tr>
<td>
<div id="chart" style="width: 300px; height: 300px; margin: auto;"></div>
</td>
</tr>
</table>
<p id="demo"></p>
<input type=text id="a" value='123'>Value A</input>
<input type=text id="b" value='23'>Value B</input>
<input type=text id="c" value='3'>Value C</input>
</body>
</html>
但是有一些错误会阻止显示值。实际上整个图表都不会显示。哪里可能是我的错?
答案 0 :(得分:1)
您正在制作的一个错误可以通过两种方式解决: 1.您可以删除
containter.destroy();
语句。因此,您不会重新创建现有图表,而是每次按下按钮时都会创建一个新图表。
您可以保留上述声明,但您需要放置此代码
$(document).ready(function(){ var info = new Array(); 信息[0] = parseFloat(的document.getElementById( “a”)的值。); 信息[1] = parseFloat(的document.getElementById( “B”)的值。); 信息[2] = parseFloat(的document.getElementById( “C”)值。); $("#chart").shieldChart({
exportOptions:
{
image: false,
print: false
},
tooltipSettings: {
enabled: false
},
seriesSettings: {
line: {
applyAnimation: {
duration: 0
},
pointMark: {
enabled: false
}
}
},
axisX: {
min: 0,
max: 5
},
primaryHeader: {
text: "Chart"
},
dataSeries: [
{
seriesType: 'bar',
collectionAlias: 'Chart',
data: [info[0],info[1],info[2]]
}
]
});
});
所以你已经有一个图表可以销毁和重新创建,你可以在第一次加载页面时显示数据。