AnyChart创建实时仪表
简述:
AnyChart是一款基于Flash和HTML5的图表、仪表控件,所包含的图表类型众多和跨平台以及跨浏览器是该产品的主要特点和优点,另外该产品基于xml文件作为数据传输的载体对于开发人员来说极易上手,极大的缩短了项目的开发周期,并且该产品所达到的显示效果也是图表产品中顶尖的。
下面我们来介绍,如果使用AnyChart快速地开发出实时显示或者更新的仪表图。
<gauges>
<gauge>
<circular name="update">
上面的"update",就是函数的第一个参数。
<pointers>
<pointer type="needle" value="40" color="green" name="p">
上面的"value"就是函数的第二个参数。
函数的第三个参数data的格式必须是{value:变量或者数值}。
如我们要更新指针数值到60,我们可以简单的写为:
chart.updatePointData("update ", "p", {value:60});
XML完整代码如下:
<?xml version="1.0" encoding="UTF-8"?>
<anychart>
<gauges>
<gauge>
<circular name="update">
<axis>
<scale minimum="0" maximum="100" major_interval="10" />
</axis>
<pointers>
<pointer type="needle" value="40" color="green" name="value">
<needle_pointer_style point_thickness="3" thickness="3" />
</pointer>
</pointers>
</circular>
</gauge>
</gauges>
</anychart>
HTML完整代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="Javascript" src="./js/AnyChart.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 840;
chart.height = 611;
chart.setXMLFile('./updateGauge.xml');
// add listener that tracks changes in gauge
chart.write();
function update()
{
chart.updatePointData("update", "value",{value:Math.random()*100});
}
setInterval(update,1000);
//]]>
</script>
</body>
</html>
总的来说AnyChart功能还是很强大的,并且对于开发人员来说极易上手,做出的图表效果也非常美观,即使是正式版产品也相当便宜,对于项目中有需要的朋友可以去控件中国网下载试用版试用,可以极大的缩短项目的开发周期,节约成本,如果使用中有什么不清楚的可以加QQ846631466
产品下载:http://www.componentcn.com/html/jbtbkj_249_5209.html
新闻热点
疑难解答