`

Anychart图表系列一:入门介绍

 
阅读更多

在项目中使用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。

  • 大小: 44 KB
0
1
分享到:
评论
4 楼 白糖_ 2013-12-18  
大胖墩子儿 写道
用anychart显示一个中国地图,但是省份我想显示成中文,这个怎么破?先谢了。


anymap暂时没用过 无能为力,你可以看下anymap相关文档试试
3 楼 大胖墩子儿 2013-12-16  
用anychart显示一个中国地图,但是省份我想显示成中文,这个怎么破?先谢了。
2 楼 白糖_ 2013-06-25  
kiven 写道
收费啊,而且费用很高啊。用不起。

呵呵,确实,愿意花钱的公司才想用这类图表
1 楼 kiven 2013-06-25  
收费啊,而且费用很高啊。用不起。

相关推荐

    基于springboot的酒店管理系统源码(java毕业设计完整源码+LW).zip

    项目均经过测试,可正常运行! 环境说明: 开发语言:java JDK版本:jdk1.8 框架:springboot 数据库:mysql 5.7/8 数据库工具:navicat 开发软件:eclipse/idea

    蓄电池与超级电容混合储能并网matlab simulink仿真模型 (1)混合储能采用低通滤波器进行功率分配,可有效抑制功率波动,并对超级电容的soc进行能量管理,soc较高时多放电,较低时少放电

    蓄电池与超级电容混合储能并网matlab simulink仿真模型。 (1)混合储能采用低通滤波器进行功率分配,可有效抑制功率波动,并对超级电容的soc进行能量管理,soc较高时多放电,较低时少放电,soc较低时状态与其相反。 (2)蓄电池和超级电容分别采用单环恒流控制,研究了基于超级电容的SOC分区限值管理策略,分为放电下限区,放电警戒区,正常工作区,充电警戒区,充电上限区。 (3)采用三相逆变并网,将直流侧800v电压逆变成交流311v并网,逆变采用电压电流双闭环pi控制,pwm调制。 附有参考资料。

    017 - 搞笑一句话台词.docx

    017 - 搞笑一句话台词

    基于微信小程序的购物系统+php后端毕业源码案例设计全部资料+详细文档.zip

    【资源说明】 基于微信小程序的购物系统+php后端毕业源码案例设计全部资料+详细文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    基于APS.net的办公物品管理系统全部资料+详细文档.zip

    【资源说明】 基于APS.net的办公物品管理系统全部资料+详细文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    一个使用 Rust 语言编写的简单命令行计算器程序示例,它可以实现基本的加、减、乘、除运算功能

    一个使用 Rust 语言编写的简单命令行计算器程序示例,它可以实现基本的加、减、乘、除运算功能。

    “服务之心”:大学生自愿者服务网系统的功能开发

    在数字化时代背景下,网络技术的发展极大地改变了人们的生活方式,不仅满足了物质需求,也为精神生活提供了更多可能性。阅读作为精神享受的重要途径,其便捷性的需求也随之增加。为了迎合这一需求,珠江学院大学生自愿者服务网系统应运而生,旨在通过网络提供便捷的志愿服务信息。 本文详细介绍了珠江学院大学生自愿者服务网系统的开发过程。系统基于SSM框架构建,融合了Vue技术,并采用MySQL数据库,确保了系统的稳定性与安全性。文章从系统概述、需求分析、系统设计、数据库设计、系统测试以及总结等多个角度对珠江学院大学生自愿者服务网系统进行了全面分析,用户可以通过该系统轻松获取所需的志愿服务信息。 该珠江学院大学生自愿者服务网系统以其稳定的运行性能、便捷的操作流程、清晰的界面设计和全面的功能性,展现出强大的实用性。

    慧集通(DataLinkX)集成客户案例:水泥行业海运运输业务致远OA与畅捷通TCloud集成解决方案

    内容概要:文章介绍了慧集通集成平台在水泥行业海运运输业务中致远OA与畅捷通TCloud的集成方案,涵盖库存、销售、运输、财务等多个环节的数据互通与流程协同。重点介绍了通过慧集通数据集成平台实现的具体对接内容及其策略,旨在提高企业的信息化管理水平,减少人为差错,提升工作效率。 适用人群:企业信息化管理人员、IT项目负责人、ERP及OA系统的实施顾问和运维人员。 使用场景及目标:适用于希望改善业务与财务流程、降低人力成本、提升数据一致性和准确性的中小企业。帮助企业实现内部信息系统的一体化,提供了一个成功的参考案例。 其他说明:案例详细阐述了多个具体业务场景下致远OA与畅捷通TCloud的对接方法及效果验证,为企业数字化转型和信息化建设提供了宝贵的经验。

    基于java+springboot+mysql+微信小程序的社区超市管理系统 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea、微信开发者工具 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat

    Java毕设项目:基于spring+mybatis+maven+mysql实现的鲸落文化线上体验馆前后台管理系统【含源码+数据库+毕业论文】

    一、项目简介 本项目是一套基于SSM框架实现的鲸落文化线上体验馆 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行 二、技术实现 jdk版本:1.8 及以上 ide工具:IDEA或者eclipse 数据库: mysql5.7及以上 后端:spring+springmvc+mybatis+maven+mysql 前端: vue , css ,js 等 三、系统功能 系统用户包括有管理员、用户 1、后台主要功能如下: 用户登录 首页 个人中心 修改密码 个人信息 用户管理 用户禁言 视频分类管理 制作视频管理 趣味视频管理 视频预览 下载视频 系统管理 轮播图管理 历史背景 趣味故事 收藏管理等功能 2、前台主要功能如下: 用户登录 用户注册 首页 制作视频 点我收藏 点击下载 赞一下 踩一下 点击量统计 趣味视频 历史背景 趣味故事 个人中心 我的收藏等功能

    利用LabVIEW并基于LabVIEW编辑电流采样 这个已经很成熟的方案了,直接可以利用文件VI

    利用LabVIEW并基于LabVIEW编辑电流采样 这个已经很成熟的方案了,直接可以利用文件VI

    基于C++与Qt的金山培训大作业源码汇总

    本项目为金山培训大作业源码汇总,采用C++与Qt技术构建,包含401个文件,涵盖106个C++源文件、72个头文件、41个PNG图片、27个项目文件以及HTML、JavaScript、CSS等多种文件类型。项目包含四个主要模块:KVector向量库、命令行会议系统、KSvg绘图板和KHttp音乐播放器。尽管最终未能入选,但展现了作者在C++编程和Qt框架应用方面的扎实功底和努力。

    基于springboot的微服务的旅行社门店系统的设计实现源码(java毕业设计完整源码+LW).zip

    功能说明:可以管理首页、个人中心、用户管理、旅行社管理、产品分类管理、门店公告管理、行政中心管理、订单信息管理、合同信息管理、社区留言、系统管理等功能模块。环境说明:开发语言:Java框架:springboot,mybatisJDK版本:JDK1.8数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/ideaMaven包:Maven3.6

    处理二维信号(或图像)的傅里叶变算法的MATLAB源代码,其中含:二维傅里叶变、用滤波器自动提取所需的频谱波峰、二维傅里叶反变、获取相位角分布、相位解包等频谱分析的整套流程(可用于干涉图处理)

    处理二维信号(或图像)的傅里叶变算法的MATLAB源代码,其中含:二维傅里叶变、用滤波器自动提取所需的频谱波峰、二维傅里叶反变、获取相位角分布、相位解包等频谱分析的整套流程(可用于干涉图处理)。

    基于java+springboot+mysql+微信小程序的黄师日报平安小程 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea、微信开发者工具 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat

    C#全自动多线程上位机源码编程 0, 纯源代码 1, 替代传统plc搭载的触摸屏 2, 工控屏幕一体机直接和plc通信 3, 功能强大,多级页签 4, 可以自由设定串口或以太网通信

    C#全自动多线程上位机源码编程 0, 纯源代码。 1, 替代传统plc搭载的触摸屏。 2, 工控屏幕一体机直接和plc通信。 3, 功能强大,多级页签。 4, 可以自由设定串口或以太网通信。 5, 主页。 6, 报警页。 7, 手动调试页。 8, 参数设定页。 9, 历史查询页。 10,系统设定页。 11, 赠送所有控件。 12,使用的西门子Plc。 13,注册opcdaauto.dll组件,用于使用opc。 15,安装kepserverEx5。 16,可以链接其他数据库。

    模拟了一个基本的SRTP项目管理系统,这里主要包括项目申请、审批、进度跟踪和结果评估等功能

    由于大学生创新创业训练计划(简称SRTP)通常涉及到项目申请、管理和评估等多个环节,以下是一个简化的Python脚本,模拟了一个基本的SRTP项目管理系统。这里主要包括项目申请、审批、进度跟踪和结果评估等功能:

    基于springboot的音乐翻唱与分享平台源码(java毕业设计完整源码+LW).zip

    项目均经过测试,可正常运行! 环境说明: 开发语言:java JDK版本:jdk1.8 框架:springboot 数据库:mysql 5.7/8 数据库工具:navicat 开发软件:eclipse/idea

    csdn五:信息管理实现

    信息管理实现

    “银行业务数字化”:科技银行业务管理系统开发指南

    在信息技术飞速发展的今天,我们生活在一个信息高度发达的时代。随着计算机技术的进步和移动终端的普及,中国的信息技术已经在全球占据领先地位,我们正经历着信息大爆炸的社会。在这样的背景下,传统的手工信息处理方式已经无法满足现代社会的需求,计算机处理信息的效率远远超过传统方法。 本次开发的科技银行业务管理系统采用Java技术,旨在通过计算机化管理提升科技银行业务信息的管理效率。系统实现了贷款管理、贷款购买管理、理财产品管理、理财产品购买管理、审核人员管理、业务人员管理、银行卡管理、银行卡金额记录管理、银行卡补办管理、存款管理、取款管理、转账管理以及账户注销管理等多项功能。 科技银行业务管理系统通过计算机处理信息,确保了数据传输的即时性,无论是数据获取还是输入,都能迅速反馈,极大提升了工作效率。同时,系统采用MySQL数据库,为数据提供了安全可靠的存储解决方案。

Global site tag (gtag.js) - Google Analytics