AnyChart创建实时仪表
简述：
AnyChart是一款基于Flash和HTML5的图表、仪表控件，所包含的图表类型众多和跨平台以及跨浏览器是该产品的主要特点和优点，另外该产品基于XML文件作为数据传输的载体对于开发人员来说极易上手，极大的缩短了项目的开发周期，并且该产品所达到的显示效果也是图表产品中顶尖的。
下面我们来介绍，如果使用AnyChart快速地开发出实时显示或者更新的仪表图。
- 首先您要下载AnyChart试用版，该试用版是完整功能版，没有使用上的时间限制，只是有很大的试用版水印覆盖在图表上，对开发人员了解该产品功能没有任何阻碍，开发人员也可以使用试用版进行项目开发，等项目开发完再买正式版来替换试用版文件也是可行的。
- AnyChart中的仪表支持实时数据的显示和更新，主要是使用到AnyChart提供的updatePointData("Gauge Name", "Pointer Name", data);函数，函数中第一个参数指的是仪表的名字，第二个参数使用的是仪表中指针的名字，这两个参数都是在您程序的XML文件中设置好，如下：
<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
