FusionCharts Suite XT提供了多种仪表控件,可以帮助开发人员从服务器获取数据并实时显示并不需要对页面进行刷新,图表自己进行初始化,通过定期加载新数据和更新,控件提供了两种不同的方法来更新仪表,一个是直接从数据库获取动态数据,另外一种则是使用JavaScript方法来更新,开发人员可以使用实时数据创建一个数据驱动并且定期获取最新的数据。另外FusionCharts JavaScript类提供了强大的JavaScriptAPI,开发人员可以使用JavaScript API来实现仪表数据的实时显示,下面是详细的代码:
<html>
<head>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
id: "myGauge",
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Speedometer",
"captionFont": "Arial",
"captionFontColor": "#333333",
"manageresize": "1",
"origw": "320",
"origh": "320",
"tickvaluedistance": "-10",
"bgcolor": "#FFFFFF",
"upperlimit": "240",
"lowerlimit": "0",
"basefontcolor": "#FFFFFF",
"majortmnumber": "9",
"majortmcolor": "#FFFFFF",
"majortmheight": "8",
"majortmthickness": "5",
"minortmnumber": "5",
"minortmcolor": "#FFFFFF",
"minortmheight": "3",
"minortmthickness": "2",
"pivotradius": "10",
"pivotbgcolor": "#000000",
"pivotbordercolor": "#FFFFFF",
"pivotborderthickness": "2",
"tooltipbordercolor": "#FFFFFF",
"tooltipbgcolor": "#333333",
"gaugeouterradius": "115",
"gaugestartangle": "240",
"gaugeendangle": "-60",
"gaugealpha": "0",
"decimals": "0",
"showcolorrange": "0",
"placevaluesinside": "1",
"pivotfillmix": "",
"showpivotborder": "1",
"annrenderdelay": "0",
"gaugeoriginx": "160",
"gaugeoriginy": "160",
"showborder": "0"
},
"dials": {
"dial": [{
"value": "65",
"bgcolor": "000000",
"bordercolor": "#FFFFFF",
"borderalpha": "100",
"basewidth": "4",
"topwidth": "4",
"borderthickness": "2",
"valuey": "260"
}]
},
"annotations": {
"groups": [{
"x": "160",
"y": "160",
"items": [{
"type": "circle",
"radius": "130",
"fillasgradient": "1",
"fillcolor": "#4B4B4B,#AAAAAA",
"fillalpha": "100,100",
"fillratio": "95,5"
}, {
"type": "circle",
"x": "0",
"y": "0",
"radius": "120",
"showborder": "1",
"bordercolor": "cccccc",
"fillasgradient": "1",
"fillcolor": "#ffffff,#000000",
"fillalpha": "50,100",
"fillratio": "1,99"
}]
}, {
"x": "160",
"y": "160",
"showbelow": "0",
"scaletext": "1",
"items": [{
"type": "text",
"y": "100",
"label": "KPH",
"fontcolor": "#FFFFFF",
"fontsize": "14",
"bold": "1"
}]
}]
}
},
"events": {
"initialized": function(evtObj, argObj) {
var scoreArray = [],
score,
speedScore,
flag,
diff;
evtObj.sender.resetInterval = setInterval(function() {
var i,
percent,
num = 30;
score = 40 +
parseInt(Math.floor(Math.random() * 170));
if (!speedScore) {
speedScore = score;
}
diff = (score - speedScore);
for (i = 0; i < 5; i++) {
percent = num - (i * 5);
scoreArray[i] = diff * (percent / 100);
}
flag = 0;
}, 1000);
evtObj.sender.changeInterval = setInterval(function() {
if (speedScore && diff) {
speedScore += scoreArray[flag];
flag += 1;
FusionCharts.items["myGauge"].feedData("value=" + speedScore);
}
}, 2000);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.resetInterval);
clearInterval(evtObj.sender.changeInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
</body>
</html>