AnyChart建立实时仪表

时间 2019-11-11

标签 anychart 建立实时仪表繁體版

原文原文链接

AnyChart建立实时仪表javascript

简述：html

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

下面咱们来介绍，若是使用AnyChart快速地开发出实时显示或者更新的仪表图。浏览器

首先您要下载AnyChart试用版，该试用版是完整功能版，没有使用上的时间限制，只是有很大的试用版水印覆盖在图表上，对开发人员了解该产品功能没有任何阻碍，开发人员也能够使用试用版进行项目开发，等项目开发完再买正式版来替换试用版文件也是可行的。
AnyChart中的仪表支持实时数据的显示和更新，主要是使用到AnyChart提供的updatePointData("Gauge Name", "Pointer Name", data);函数，函数中第一个参数指的是仪表的名字，第二个参数使用的是仪表中指针的名字，这两个参数都是在您程序的XML文件中设置好，以下：

<gauges>dom

<gauge>函数

<circular name="update">ui

上面的"update"，就是函数的第一个参数。指针

<pointers>component

<pointer type="needle" value="40" color="green" name="p">xml

上面的"value"就是函数的第二个参数。

函数的第三个参数data的格式必须是{value：变量或者数值}。

如咱们要更新指针数值到60，咱们能够简单的写为：

chart.updatePointData("update ", "p", {value：60});

若是您仍是没有理解，您能够看下下面咱们提供的一个简单的完整事例。

XML完整代码以下：

<?xml version="1.0" encoding="UTF-8"?>

<gauge>

<axis>

</axis>

<needle_pointer_style point_thickness="3" thickness="3" />

</pointer>

</pointers>

</circular>

</gauge>

</gauges>

</anychart>

HTML完整代码以下：

<html>

<head>

<title>AnyChart Sample</title>

</head>

<body>

//<![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