如何使用FusionCharts Suite XT创建实时仪表

作者:控件中国网   出处:控件中国网   2016-04-28 09:40:49   阅读:2

FusionCharts Suite XT提供了多种仪表控件,可以帮助开发人员从服务器获取数据并实时显示并不需要对页面进行刷新,图表自己进行初始化,通过定期加载新数据和更新,控件提供了两种不同的方法来更新仪表,一个是直接从数据库获取动态数据,另外一种则是使用JavaScript方法来更新,开发人员可以使用实时数据创建一个数据驱动并且定期获取最新的数据。另外FusionCharts JavaScript类提供了强大的JavaScriptAPI,开发人员可以使用JavaScript API来实现仪表数据的实时显示,下面是详细的代码:
Gauge.png
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<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>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat