AnyChart创建实时仪表

简述：

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});

  1. 如果您还是没有理解，您可以看下下面我们提供的一个简单的完整事例。

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

AnyChart创建实时仪表的更多相关文章

  1. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  2. 使用SignalR+Asp.net创建实时聊天应用程序

    一.概述: 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习Signal ...

  3. AnyChart图表仪表控件在Flex环境下使用

    AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...

  4. 图表控件Anychart常见问题

    AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...

  5. Zabbix-(三)监控主机CPU、磁盘、内存并创建监控图形

    Zabbix-(三)监控主机CPU.磁盘.内存并创建监控图形 一.前言 前文中已经讲述了两种方式对Zabbix的搭建,本文将讲述如何在zaibbx上添加需要监控的主机,以及使用Zabbix自带模板和自 ...

  6. Spark Streaming——Spark第一代实时计算引擎

    虽然SparkStreaming已经停止更新,Spark的重点也放到了 Structured Streaming ,但由于Spark版本过低或者其他技术选型问题,可能还是会选择SparkStreami ...

  7. Dynamic CRM 2013学习笔记（四十二）流程5 - 实时/同步工作流（Workflow）用法图解

    实时工作流跟插件一样,也是用事件执行管道来执行,能在pre,post或核心操作中执行.跟插件一样,不能在创建之前和删除之后执行.如果执行过程中有异常发生,会取消并回滚整个操作.实时工作流里所有的活动和 ...

  8. Android 实时文件夹

    实时文件夹是一种用来显示由某个ContentProvider提供的数据信息的桌面组件.要创建一个实时文件夹,必须要有两个方面的支持. 1,要定义一个用来创建实时文件夹的Activity. 2,所指定数 ...

  9. 【转载】CentsOS系统inotify实时监控服务器文件(夹)定制事件处理程序

    原始博文和参考博文 1.CentsOS系统inotify实时监控服务器文件 2.Linux中让进程在后台运行的方法 3.linux inotify 监控文件系统事件 非常好 方法一 说明: 服务器系统 ...

随机推荐

  1. C#中Json进行序列化时去掉值为null的节点

    当我们用json文件为数据源时,并对json数据进行操作时可能会产生一些数值为null的节点生成,想要去掉null的节点需要一些操作 本文用一个简单的工具对json进行操作 工具:Newtonsoft ...

  2. DaemonSet 案例分析

    本节详细分析两个 k8s 自己的 DaemonSet:kube-flannel-ds 和 kube-proxy . kube-flannel-ds 下面我们通过分析 kube-flannel-ds 来 ...

  3. caffe的调试技巧 和 使用split层

    1.网络中的layer层的输出,只要没有作为其他层的输入,caffe的日志就会把这个top输出(如果你用那个网站画网络结构图,你也会发现这种情况的层的颜色是不一样的,是紫色的) 2.如果你想看某一层在 ...

  4. bootstrap 按钮组的嵌套

    您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group .当您想让下拉菜单与一系列按钮组合使用时,就会用到这个. 实例: <!DOCTYPE ...

  5. 用Python写一个小爬虫吧！

    学习了一段时间的web前端,感觉有点看不清前进的方向,于是就写了一个小爬虫,爬了51job上前端相关的岗位,看看招聘方对技术方面的需求,再有针对性的学习. 我在此之前接触过Python,也写过一些小脚 ...

  6. POJ-3669-流星雨

    这题的话,卡了有两个小时左右,首先更新地图的时候越界了,我们进行更新的时候,要判断一下是不是小于零了,越界就会Runtime Error. 然后bfs 的时候,我没有允许它搜出300以外的范围,然后就 ...

  7. 永久激活IDEA的方法

    第一步,下载破解补丁jetbrains-agent.jar 链接:https://pan.baidu.com/s/15x6dzOjveMkHlgHJT0PBWg提取码:2ykx 第二步,将下载的破解补 ...

  8. Java并发编程的艺术 记录（一）

    模拟死锁 package com.gjjun.concurrent; /** * 模拟死锁,来源于<Java并发编程的艺术> * @Author gjjun * @Create 2018/ ...

  9. 编写个makefile文件测试patsubst 的作用

    1 SRCS := $(wildcard *.c) 2 OBJS := $(patsubst %.c,%.o,$(SRCS) ) //把$(SRCS)中的文件.c全部换成.o文件 3 all: 4 @ ...

  10. Experimental considerations

    先知 重金属颗粒与气孔大小 气孔位置.密度与开合时间 角质层厚度 意外 叶子第二天掉落 样本没有放冰箱 高光谱仪器损坏 天气下雨/雪 仪器预约 楼顶/实验室门卡提前一天预约 光合仪提前一天预约 ASD ...