首页 > 其他分享 >Amchart技术说明

Amchart技术说明

时间:2023-08-01 12:32:16浏览次数:40  
标签:曲线 数据文件 flash 技术 说明 设置 数据 Amchart 属性


 

Amchart技术说明

 

一、amchart是什么

amchart是一组由flash做成的图表组件。这些flash没有数据,一但指定了配置文件和数据文件的地址,flash就可以显示出你所需要的图表。

在配置文件中可以设这个flash的颜色,大小,文字属性,柱子,曲线的粗细颜色,是什么类型的柱子或曲线,是否有气泡,是否有图例,定位,鼠标右键及其事件等,stock图还要在里面指定数据文件的地址。

在数据文件中存放了要展示的数,数据一般是XML类型的数据,也有用CSV或TXT的类型的数据。

这里所指的文件不一定是一个真实的文件,也可以是同一个域(指访问的这个flash的域名)内部的URL,垮域URL要是全名。在我们的系统中大部分是用flash所在域的同域中。

二、amchart怎么应用到我们的架构中

这里用一个例子说明。

Amchart技术说明_数据

例子中有一个amlineUnitLoad对象,它有两个属性分别是so_unitLoad_1和so_unitLoad_2都是SWFObject对象,引用的对象都是amline.swf这个flash。

在reLoadLine()方法中设置了这两个SWFObject对象的path属性,配置文件的URL,数据文件的URL,在数据加载前的flash颜色,添加参数wmode值为opaque,这样就不会档住由js动态生成的浮动层。最后将flash显示在相应的位置上。

这是实时负荷曲线的例子,每15分钟会调用一次reLoadLine()方法。可以使flash重新访问一次后台,重新加载数据,并将加载的数据。

配置文件:以<settings>为根节点,前面的大部分子都是一些全局属性,比如文字颜色,文字大小,图形的类型等,刷新时长等。

Background用来设置flash的背景颜色,背景透明度,边框颜色,边框透明度,还可以给背景添加一个图片甚至是一个flash。

plot_area就是显示图形的整个区域,在里面可以设置图的填充色,填充透明度,填充边框,离上下左右各个方向的距离等。

Scroller里面主要设置在图开放大后,滚动条是否存在,存在的话前景颜色,透明度以有背景颜色和透明度,高度等。

Grid里面设置了网络的属性有X水平方向,Y第垂直方向分为左和右,这个属性可以将图表的坐标属性确定。

Values与Grid共同确定了坐标,Grid偏向于样式,vlaues偏向于值。

Axes这是显示图形的区域,也就是在坐标内部的区域,可以设置它的color,alpha,width,tick_length,logarithmic等属性。

Indicator里面配置与气泡有关。

Legend图表图例的属性。颜色,位置。

vertical_lines对线图中的柱子属性的设置,宽,透明度等。

zoom_out_button图形放大后也现的缩小标志的属性,如单击样式等。

Help这是帮助按扭的设置,可以设置气泡上的内容等等。

export_as_image这是为导出图片用的,在里面可以设置导出的区域,处理导出的后台URL等。

error_messages错误信息,当查询数据发生错误时要显示在页面上的信息,以及样式。

Strings一些字符串的设置,比如错误信息,导也图片要显示的菜单内容等。

context_menu在这个例子中用到了右键菜单:

Amchart技术说明_配置文件_02

这样在右键的时候就会多出四个菜单,如果在页面的js写好了这些方法,在点击的时间就可以调用到这样方法了。

Labels在flash上显示的一些标签,比如标题等。

Graphs这是整个配置中最重要的,它决定了曲线的条数,或柱子的组数。一个graph就对应了一组数据,在后台返回的数据要对之对应。在graph中可以设置图形的类型,要显示的样式,气泡内容,是否被选中,是否显示出来等。

Guides这是导航线,用来做对比用。

数据文件:无论是柱图还是曲线图大致的结构都是这样的。

以chart为根,有两个子结点。

series是图表的横坐标的数据,数据有多少个点是由它来决定的,里面的一个value表示一个点。

Graphs是图表的数据组,有多少个graph就有多少组数据,曲线中用曲线的条数来表示,在柱状图中由同一横坐标上柱子的个数来表示。

在graph标签下也有很多value,这里的value与series中的value是对应的,用xid属性对应上。如果这里的value缺省了曲线就会在这里断掉,柱图在这里高度为0。

在value上也可以配置其他的一些信息,比如气泡内容等。

如图中的xid为3的数据,第二条数据上发生了一个事件,这个事件的很多信息都表示出来了,在图表上可以显示出一个标志,它的颜色大小,透明度,形状,气泡内容都可以在这里设置也来。

Amchart技术说明_amchar_03

对于动态生成数据文件和配置文件,这建议直接在后台去构造,或者将数据对象抛给jsp让jsp有jstl与el配合生成格式正确的XML文件。

目前我的程序中常用的方法是用LineDataGraphBean类装载数据。

如,下面为数据加了两条曲线,并将LineDataGraphBean集合抛给一个jsp:

Amchart技术说明_数据文件_04

LineDataGraphBean类:

Amchart技术说明_数据_05

里面包含的信息都是数据和线的属性。

jsp:

Amchart技术说明_配置文件_06

这里用jstl与el表达示将lineDataGraphBeans中的数据都展示也来了。并生成了一个格式正确的XML文件,返回给amchart的flash。

三、amchart几种常用图形

amcolumn这是柱状图:

按方向可以分为两种column和bar,column是纵向的,bar是横向的。

Amchart技术说明_配置文件_07

column

Amchart技术说明_数据文件_08

bar

按并排和叠放的排放方式可以分clustered, stacked, 100% stacked, 3d column这几种。Clustered是正常的

Amchart技术说明_数据文件_09

 100% stacked

Amchart技术说明_数据_10

 stacked

Amchart技术说明_amchar_11

 clustered

Amchart技术说明_配置文件_12

 3d column

在柱图中加线

Amchart技术说明_amchar_13

可以在配置文件中的Graphs下面针对每一组数据的类型进行设置type属性:

<type>column</type>或<type>line</type>

也可以在数据文件中设置<graph type="line" gid="0">

经过设置每一组数据都可以是柱子或曲线。

Amline是曲线图形组件。它的横坐标是以一种连继的性质出现的,这就决定了它与柱图的区别,因为在柱图中也可以有曲线,但是在柱图的曲线不是在线上的每一个地方都有数据的,这从它们的气泡显示的效果可以看出来,而且曲线图是可以放大的,放大后可以出现滚动条。

Amchart技术说明_配置文件_14

它的其他配置,数据构造与Amcolmun一致。

Ampie在系统中用的比较少。

Amchart技术说明_配置文件_15

数据文件很简单

Amchart技术说明_配置文件_16

有几块就有几个slice项,title属性是他的标题,pull_out表示是否弹出。

它的样式都是在配置文件中设置的。大部与线图,柱图一致,就不在赘述。

 

----------------------------------------------------------------------------

多个纬度,颜色设置.通过graph 的color来设置.

<graph gid=\"g1\" color=\"#FF83FA\"

-----------------

plot_area 整个线框区域位置

 

<graph gid=\"g7\"  type=\"column\"  

通过 type="column" 或者 type="line"  来确定显示为柱子还是 曲线.

标签:曲线,数据文件,flash,技术,说明,设置,数据,Amchart,属性
From: https://blog.51cto.com/u_16161240/6919671

相关文章

  • 技术blog
    算法爬虫相关 http://ifeve.com/ 并发编程网 http://coolshell.cn/酷壳 http://jm.taobao.org/ 阿里中间件 http://www.searchtb.com/淘宝搜索技术博客 http://ju.outofmemory.cn/feed/74/淘宝核心技术团队博客  设计模式 http://zhuanlan.zhihu.com/evilcos/196......
  • jQuery验证控件jquery.validate.js使用说明
    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validationjQueryplugin:Validation使用说明一导入js库<scriptsrc="../js/jquery.js"type="text/javascript"></script><scriptsrc="../js/jquery.validate.js"type=&q......
  • 一分钟掌握技术术语:API(接口)
    很多产品经理在项目开发过程中经常听到:你调我这个接口就好了;这个功能你写个接口给我;有什么不懂的就看下API接口文档。开发经常说的接口是什么意思呢?术语解释:API(ApplicationProgrammingInterface),简单理解就是程序之间的约定。主要用于满足应用访问另一应用一组例程,但又无需访问源......
  • 跨端技术概述
    0x1跨端跨端背景PC端(WLM)、移动端(Android/iOS)、web端、IoT设备(车载设备、手表)常见痛点:各端功能区别不多,但需要单独配置开发人员开发、维护成本高Android、iOS发版周期长跨端技术方案目标加快研发效率,降低学习成本,提高多端一致性增强用户体验,提高稳定性,优化性......
  • 【技术积累】Linux中的命令行【理论篇】【二】
    ag命令命令介绍ag命令是一个用于在Linux系统中进行文本搜索的工具。它是基于SilverSearcher的改进版本,具有更快的搜索速度和更强大的功能。ag命令的基本用法是在指定的目录中搜索指定的关键字。例如,要在当前目录中搜索关键字"example",可以使用以下命令:agexampleag命令会递......
  • 6种主流的Hybrid 技术框架与方案
    移动操作系统在经历了诸神混战之后,BlackBerryOS、SymbianOS、WindowsPhone等早期的移动操作系统逐渐因失去竞争力而退出。目前,市场上主要只剩下安卓和iOS两大阵营,使得iOS和安卓工程师成为抢手资源。然而,由于两者系统的差异,开发同一个应用需投入两倍的工作量,不仅增加了人力成本,而......
  • 你确定不来看看?谷歌技术团队打造的Kotlin协程入门+进阶实战
    前言尽管协程并不是一个新的话题,但他是一个很吸引人的话题,协程在这些年里被重新发现了很多次,特别是当需要某种形式的轻量级线程和/或寻找“回调地狱”的解决方案时。Kotlin协程的概念协程是Coroutine的中文简称,co表示协同、协作,routine表示程序。协程可以理解为多个互相协作的程序......
  • dbt class 简单说明
    dbtclass可以用来创建数据仓库中的一些对象(比如关系,列)当需要通过高级模式进行模型以及宏构建的时候就比较有用在不少开源同时也包括官方core中都有使用到主要包含的功能Relation对象创建参考(对于在宏中使用api.Relation.create创建) {%setrelation=......
  • j2me在线音乐播放器技术分析
    j2me在线音乐播放器技术分析1.在线音乐播放器:音乐资源存储在服务器端,手机客户端通过无线网络读取服务器端音乐资源进行播放,播放器具有播放、暂停、快进、快退、循环播放、显示播放进度、时间等功能.2.技术实现由于j2me占时不支持边播放边下载音乐资源功能,所以需采用另一种方式实......
  • 逆向开发-hook技术
    Hook(钩子)简介Hook:意为钩子。在技术中用途多样化,但多数都用来改变原有程序执行顺序或拦截原程序指定信息、代码或数据。这技术其实无处不在,比如我们所熟知的任意杀毒软件中。这些杀软在各种敏感的系统函数中,下了各种钩子。当有程序或病毒调用该函数时,首先会经过杀软的检测函......