在尝试了几种方法来解决这个问题后,我决定寻求一些帮助。问题是,我在网站上提供信息,在大多数情况下,用户不会看太多。另一方面,如果需要,这些信息需要点击一下。所以我使用了一个 Shield UI JavaScript 图表,它绑定到远程数据。我需要的是初始化图表,而不是显示数据。这需要推迟到(如果)用户点击图表。有没有办法稍后(异步)绑定数据。如何做到这一点?下面是我处理的一些代码,出于测试目的,它是本地数据。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../../../css/shieldchart.css" />
<script src="../../../../external/jquery-1.8.2.min.js" type="text/javascript">//</script>
<script src="../../../../external/jquery.mousewheel/jquery.mousewheel.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/rgbcolor.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/canvg.js" type="text/javascript">//</script>
<script src="../../../../external/globalize/globalize.js" type="text/javascript">//</script>
<script src="../../../../common/core.js" type="text/javascript">//</script>
<script src="../../../js/shieldchart.js" type="text/javascript">//</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
var Information= [12,22,22,12,32,44,34 ];
$("#container").shieldChart({
events: {
seriesClick: function pointSelectHandler(args) {
var containterproducts = $("#container").swidget();
containterproducts.destroy();
$("#container").shieldChart({
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Electricity prices"
},
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "User Information",
data: Information
},
]
});
}
},
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Click to show data"
},
});
});