控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

使用图表控件AnyChart创建实时的仪表

作者:ComponentCN 出处:ComponentCN 2014年05月16日 阅读:

AnyChart是一款基于Flash和HTML5的图表、仪表控件,所包含的图表类型众多和跨平台以及跨浏览器是该产品的主要特点和优点,另外该产品基于XML文件作为数据传输的载体对于开发人员来说极易上手,极大的缩短了项目的开发周期,并且该产品所达到的显示效果也是图表产品中顶尖的。

下面我们来介绍,如果使用AnyChart快速地开发出实时显示或者更新的仪表图。
 
1.    首先您要下载AnyChart试用版,该试用版是完整功能版,没有使用上的时间限制,只是有很大的试用版水印覆盖在图表上,对开发人员了解该产品功能没有任何阻碍,开发人员也可以使用试用版进行项目开发,等项目开发完再买正式版来替换试用版文件也是可行的。
2.    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});
3.    如果您还是没有理解,您可以看下下面我们提供的一个简单的完整事例。
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功能还是很强大的,并且对于开发人员来说极易上手,做出的图表效果也非常美观,即使是正式版产品也相当便宜,对于项目中有需要的朋友可以去控件中国网下载试用版试用,可以极大的缩短项目的开发周期,节约成本,如果使用中有什么不清楚的

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统