在项目中使用Anychart图表已经有8个月有余,对Anychart整体也有了一定的了解,产品升级的空闲期,分享一点Anychart图表的使用经验。
- 前言
Anychart是一款基于Flash/HTML5(最新的6.0x版本开始支持HTML5)进行图形渲染的图表组件,图数据采用了XML格式进行解析,主要提供Javascript方法调用的形式来将图形渲染到web页面。
这是一款商业收费产品,使用未授权的产品时,图表背景会有“Anychart”字样的水印。
官网地址:http://www.anychart.com/home/
帮助文档地址:http://anychart.com/products/anychart/docs/users-guide/index.html?QuickStart.html
XML格式标签文档说明:http://anychart.com/products/anychart/docs/xmlReference/index.html
撸主大多数Anychart技术都是从帮助文档中学习的,虽然英语只有四级,但是看起来感觉压力也不大,某些单词不懂就谷歌翻译。
- HelloWorld
如何创建自己的第一个图表在官网文档中已经有详细说明,链接在这里,下面我再结合例子简单说明一下。
首先下载图表的相关文件,主要包括一个或两个js、多个swf文件。
Anychart的js文件有两个:AnyChart.js和AnyChartHTML5.js,前者是图表必备js文件,后者是如果你需要支持HTML5时才需要的文件,所以有的时候可用可不用。
Anychart的swf文件也有多个,用得最多的是AnyChart.swf和Preloader.swf,前者包含了所有的图数据;后者是一个优化性能的文件,在IE高版本浏览器下效果明显,如果图很多并在一页显示不完,它可以达到延迟加载的效果,即优先显示第一页的图。同时呢,如果你下载的是官方给的链接,你会发现除了以上两个swf还会有Chart.swf、Pie.swf、Funnel.swf等等文件,这些文件都比Anychart.swf小,其实他们的作用是如果你只想用某一类的图并且为了加载更快,可以单一选择某一种swf来渲染。
然后准备一个html文件和xml文件。因为Anychart可以在web页面中显示,所以我们需要准备一个html文件,并且在里面编写图形生成代码,最后访问这个html即可看到效果。而XML前面已经说了,Anychart是通过解析XML数据来生成图形的,也就是说你希望图形是以饼状还是柱状还是别的图形显示,已经你希望显示的数据是什么,是否显示标题,是否显示动画效果等等配置都是通过XML来说明的。
下面看一个简单的XML例子,通过plot_type来定义图是水平还是竖直显示;通过<series>的type来说明是什么类型的图;<point>是一条数据,下面有5条就表示图表会出5条柱子;<point>的name有很多种术语解释,我通常称之为“指标”,而属性y则是指标对应的数据值,我通常称之为“指标值”。
<anychart> <charts> <chart plot_type="CategorizedHorizontal"> <data> <series name="Year 2003" type="Bar"> <point name = "Department Stores" y="637166"/> <point name = "Discount Stores" y="721630"/> <point name = "Men's/Women's Specialty Stores" y="148662"/> <point name = "Juvenile Specialty Stores" y="78662"/> <point name = "All other outlets" y="90000"/> </series> </data> <chart_settings> <title> <text>Sales of ACME Corp.</text> </title> </chart_settings> </chart> </charts> </anychart>
上面这段XML,个人认为是是最最简单的XML了,在项目中你可能会遇到比这复杂百倍的XML,但是不要气馁,后续我会教大家如何让图表“组件化”。
下面是一段HTML代码,这段代码告诉你如何调用Anychart并且生成图形,首先需要new Anychart(swf url)的形式生成Anychart对象,然后设置图形的高度和宽度,通过setXMLFile(xml url)指定XML数据文件,在通过writ方法即可显示图形了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sample AnyChart Flash Chart</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 = 600; chart.height = 300; chart.setXMLFile('./anychart.xml'); chart.write(); //]]> </script> </body> </html>
下面看最后的图形效果
至此,一个最简单的Anychart图表生成了,如果想看到图的效果,可以在官网下载该例子(点这里)
针对上面的HTML呢,做一些扩展,有些用户不希望通过chart.write方法出图,有些用户不希望传入XML文件地址,而是直接传一段XML字符串来生成图,其实这个功能Anychart都提供了,并且也是我一直很推荐的写法。
下面这段代码介绍了如何解决上面的需求:通过new Anychart(swf url,preloader swf) 传入preloader.swf地址来提高大数据量图表加载速度,通过setXMLData方法可以传入XML字符串,通过write(html id)来将图表渲染到指定HTML标签内。Anychart图表高宽度支持传入px像素值,也支持百分百比的形式,需要注意的是图表的高宽度依赖于自己父容器(html标签)的高宽度,即如果你的父容器本身很小,那么图表像素设置再高也不会有效果的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>sample-single-series-column-chart</title> <style type="text/css"> html, body, #chartContainer { width: 100%; height: 100%; padding: 0; margin: 0; } </style> <script type="text/javascript" language="JavaScript" src="js/AnyChart.js"></script> <script type="text/javascript" language="JavaScript"> var chart = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf'); chart.width = "100%"; chart.height = "100%"; chart.setXMLData("<anychart>......</anychart>"); chart.write("chartContainer"); </script> </head> <body> <div id="chartContainer"></div> </body> </html>
- 总结
生成图表分为以下几个简单的步骤:
①环境搭建:准备Anychart必备文件(Javascript和swf)
②准备XML数据
③web页面编写代码,调用Anychart对象生成图形
第一篇说得很简单,后续我将从多方面一步步介绍如何灵活使用Anychart。
相关推荐
AnyChart图表个人总结,学习了一周,个人作的一个总结文档,希望对大家有用。
优秀的图表书籍,适合各层级水平人员参考学习!
arcgis 10.0 接图表(1:10万),地图分幅
全国1:20万地形地质图接图表-kml格式,带有图幅号及名称。 全国1:20万地形地质图接图表-kml格式,带有图幅号及名称。全国1:20万地形地质图接图表-kml格式,带有图幅号及名称。全国1:20万地形地质图接图表-kml格式,...
很实用的anychart图表api,免费的 很实用的anychart图表api,免费的 很实用的anychart图表api,免费的 很实用的anychart图表api,免费的
Anychart XMLReference配置的文档说明,离线模式
NULL 博文链接:https://zhuhm.iteye.com/blog/1452059
Excel2021图表制作实例:达标图.docx
使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。 AnyChart 可以被用于Web、桌面和移动应用程序,...
资源名称:Python图表绘制:matplotlib绘图库入门资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
本书图文并茂,示例丰富,第3版从190段代码和164幅图表增加至205段代码和220幅图表,对C语言的基础知识进行了彻底剖析,内容涉及数组、函数、指针、文件操作等。对于C语言语法以及一些难以理解的概念,均以精心绘制...
React AnyChart插件 直观易用的插件,可让您创建和使用 。 目录 下载并安装 包管理器 您可以使用npm , bower或yarn来安装AnyChart-React: npm install anychart-react bower install anychart-react yarn add ...
最新版全国1:25万地质图接图表,完整高清 最新版
来自国外的后国外的后台网站,图表数据后台可免费使用,有附带代码和PSD源文件
全国1:5万地形地质图接图表-kml格式,带有图幅号及名称。
在职场混免不了需要做汇报,做...本文用一系列实例,帮助大家理解各种图表怎么用才有效。对于每种图表,会给一个50分例子(不及格),一个70分例子(中等)和一个90分(优良)例子。这样你可以轻松体会到好图表的魅力。
Android基本示例本示例说明如何使用组件在Android应用程序中使用AnyChart图表库。在您的Android设备上运行要在您的Android设备上运行AnyChart示例,只需在设备浏览器中打开 URL。 该示例应用程序将自动下载并开始...
Flex 去除 AnyChart 图表组件 水印显示 Watermark
VB 柱状图生成的例子,看看,是不是很实用的图表效果,这种图表也叫做直方图表,这是纵向的,也有横向的柱状图.本柱状图的生成是使用了Vb内置的微软图表控件MSChart控件,因此可看作是此控件的应用范例.