在项目中使用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图表个人总结 AnyChart是一种先进的基于Flash的数据可视化解决方案，用于构建复杂报表的理想工具。它使用XML作为通用数据接口，使得我们能够从任何数据源中使数据可视化。AnyChart是完全跨浏览器和跨平台的...
在GIS（地理信息系统）领域，接图表是一种重要的地图制作工具，用于解决不同比例尺地图之间的无缝拼接问题。本文将详细解析"1:20万和1:5万接图表，ArcGIS矢量文件"这一主题，以及这些文件在实际应用中的作用。 首先...
anyChart的API是其核心，包含了一系列方法和属性，用于配置图表、设置数据、添加交互效果和样式。API文档通常包括以下部分： 1. **初始化图表**: 首先，你需要创建一个anyChart实例，指定图表类型。例如，`anyChart...
接下来，我们将详细解析如何使用这两个文件创建一个简单的图表： 1. **引入资源**：在HTML文件中，我们需要引入anychart.js和anychart.swf。通常，这会通过`<script>`和`<object>`标签完成。例如： ```html ...
AnyChart是一款强大的JavaScript图表库，它提供了丰富的图表类型和高度自定义的选项，适用于网页和移动应用的数据可视化。在某些场景下，我们可能需要将AnyChart生成的图表保存为图片，以便于分享或离线使用。本篇...
在这个场景下，我们关注的是“flex anychart”插件，它是一个强大的JavaScript图表库，用于创建交互式且灵活的数据可视化解决方案。本示例是一个使用flex anychart构建的雷达图，这种图表类型在比较多个变量或多组...
全国1:5万地形地质图接图表-kml格式是一个地理信息系统（GIS）数据集，用于展示我国详尽的地形地质信息。KML（Keyhole Markup Language）是Google Earth和Google Maps等应用程序用来存储和显示地理位置信息的一种...
Anychart XMLReference配置的文档说明，离线模式
Anychart是一款强大的数据可视化工具，它提供了丰富的API接口，使得开发者可以轻松地在Web应用程序中集成交互式图表。这个“Anychart API 帮助文档”是开发者理解和使用Anychart API的重要资源，旨在提供详尽的指导...
这些数据包含了图表所需的系列、数据点、轴信息、标签等元素，一旦XML生成并发送到前端，AnyChart会自动解析并绘制出相应的图表。 在文件列表中，我们看到一个名为"map.bin"的文件。这可能是一个二进制文件，通常...
使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。 AnyChart 可以被用于Web、桌面和移动应用程序，...
资源名称：Python图表绘制：matplotlib绘图库入门资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
本书图文并茂，示例丰富，第3版从190段代码和164幅图表增加至205段代码和220幅图表，对C语言的基础知识进行了彻底剖析，内容涉及数组、函数、指针、文件操作等。对于C语言语法以及一些难以理解的概念，均以精心绘制...
【OriginPro 9.1：科研图表绘制入门教程】 OriginPro 9.1是一款专为科研工作者设计的强大绘图软件，它提供了丰富的图表类型和数据分析功能，帮助用户无需编程即可创建复杂的图表，节省时间和精力。本教程适用于需要...
2. **图表类型**：Anychart支持多种图表类型，如柱状图、折线图、饼图、散点图、热力图等。学习如何根据数据和需求选择合适的图表类型。 3. **数据绑定**：理解如何将你的数据源（可能是JSON、CSV或其他格式）与...
FusionCharts是一款强大的图表控件，它利用Adobe Flash技术，为用户提供交互式的、数据驱动的动态图表。这个组件特别适合那些希望通过视觉化方式呈现复杂数据的开发者，无论他们使用的是JSP、HTML或其他任何网页脚本...
AnyChart是一款强大的JavaScript图表库，它提供了丰富的图表类型和自定义选项，使得数据可视化变得简单且高效。本篇将深入探讨如何在Java环境中利用AnyChart创建各种报表，并实现无水印和分页功能。 首先，让我们...
React AnyChart插件 直观易用的插件，可让您创建和使用 。 目录 下载并安装 包管理器 您可以使用npm ， bower或yarn来安装AnyChart-React： npm install anychart-react bower install anychart-react yarn add ...