您的位置：首页 > 其它

amCharts在网页上绘制各种图形[转]

2015-08-17 18:42 459 查看
一 amCharts柱状图实例教程

本实例讲的是JavaScript版的，flash版的有空再弄上来

一、下载并配置

去官网下载http://www.amcharts.com/

下载后解压，把解压后的文件夹中的amcharts文件夹内的内容全部复制到你的网站脚本目录中（本例以js文件夹为例）

二、创建一个用于显示图表的div

<body>

<div id="chartContainer" style="width: 640px;height:400px;"></div>

</body>
三、引用amCharts的js函数库

<script src="js/amcharts.js"type="text/javascript"></script>

<script src="js/raphael.js"type="text/javascript"></script>
四、定义一个json数组变量用于存放我们的数据

<script type ="text/javascript">

var chartData = [{ country:"USA", visits: 4252 },

{ country:"China", visits: 1882 },

{ country:"Japan", visits: 1809 },

{ country:"Germany", visits: 1322 },

{ country:"UK", visits: 1122 },

{ country:"France", visits: 1114 },

{ country:"India", visits: 984 },

{ country:"Spain", visits: 711 },

{ country:"Netherlands", visits: 665 },

{ country:"Russia", visits: 580 },

{ country:"South Korea", visits: 443 },

{ country:"Canada", visits: 441 },

{ country:"Brazil", visits: 395 },

{ country:"Italy", visits: 386 },

{ country:"Australia", visits: 384 },

{ country:"Taiwan", visits: 338 },

{ country:"Poland", visits: 328}];

</script>

五、接下来我们需要创建一个AmCharts.AmSerialChart对象，并为它的dataProvider（数据源变量）和categoryField（类目字段变量，一般指x轴上要显示的东西）赋值：

var chart = newAmCharts.AmSerialChart();

chart.dataProvider = chartData;

chart.categoryField = "country";

六、现在我们需要创建一个图表对象（graph），并通过它来设置我们的图表的各种属性：

var graph = new AmCharts.AmGraph();graph.valueField ="visits"graph.type ="column";chart.addGraph(graph);valueField用于标识图表所要显示的数据的值，type是图表的类型如column是柱状图，line是线形图等
七、用AmCharts.AmSerialChart对象的write函数将图表输出，这样一个简单的图表就出现了....

chart.write('chartContainer');





真难看啊，:-( 我们美化一下

1、我们可以通过设置graph对象的lineAlpha和 fillAlphas值来设置图表的边框透明度和填充透明度，如：

graph.lineAlpha = 0;

graph.fillAlphas = 0.8;




2、下面我们设置下图表的3D效果：
chart.angle = 30;

chart.depth3D = 15;





那么我们把角度和深度调整一下看看效果如何：

chart.angle = 15;

chart.depth3D = 25;





明白angle和depth3D的作用了吧

细心的朋友可能发现了，我们敬爱的china去哪了？怎么是隔一个显示一个啊，我也很郁闷，官方文档上说通过设置

var catAxis = chart.categoryAxis;

catAxis.gridCount = chartData.length;
就可以显示了，可是我弄了半天没出来，后来发现把用于显示图表的div的width设成100%，或者高度保持不变，width调的大点是可以显示的，具体怎么回事有空在研究吧:-( 知道原因的朋友也可说下...

[经验证，发现是版本的问题，我下的是v2.5.1 官方的文档是2.0的]

另外，可以通过设置：graph.balloonText ="[[category]]:[[value]]";让提示中即显示数字又显示类目名称

二 flash版













amcharts官网上各种各样的都可以下载，而且可以免费使用，唯一不足的就是免费版会显示它公司的链接，不过这是可以破解的，下载amcharts_key.txt放到flash的相同目录下即可。

我所使用的flash是两个不同的版本，一个是直接在官网下载的柱状图、另一个不知道的哪下的饼状图，不过也是amcharts的，但貌似是经过破解的，只有一个xml文件（一般来说都应该有两个，一个主要设置内容，一个主要设置外观）如下图：

准备工作:统计图的swf文件、相关的xml数据文件、swfobject1.5(现在2.x都有了，不过感觉1.5用着舒服些)

先说说从官网下载下来的使用方法吧。直接以代码呈现：(关于swfobject请查看官方文档)

1 <script type="text/javascript"src="js/swfobject.js"></script>

2 <div id="flashcontent">

3 <strong>You need to upgrade yourFlash Player</strong>

4 </div>

5 <scripttype="text/javascript">

6 // <![CDATA[

7 var rand =Rand();

8 var so =new SWFObject("amcolumn.swf", "column", "360", "300", "8","#FFFFFF");

9 so.addVariable("settings_file",encodeURIComponent("amcolumn_settings.xml?"+Math.random()));

10 so.addVariable("data_file",encodeURIComponent("amcolumn_data.xml?"+Math.random()));

11 so.write("flashcontent");

12 // ]]>

13 </script>

首先引用swfobject.js，不然编译器会罢工的噢~ : )

然后就是一个div，也可以是span，里面有一句"You need to upgrade your FlashPlayer”，你肯定猜得到在flash未加

载时就会显示这句话，这是为什么呢？（破有小沈阳的味道）请继续往下看，SWFObject(注意大小写哦)里的第一句就引用了

想要加载的flash路径，然后下面两句关联上xml文件，如果要动态改变flash的话就必须在xml后加上一个随机变量，否则flash

只会在你重新运行或者清空缓存之后改变，最后一个so.write就是用flash替换掉div中的内容。

下面是改变内容的代码：(因为完全不熟悉xml，自己瞎琢磨出的一个方法，仅作参考）

0 using System.Xml;

1 XmlDocument doc = new XmlDocument();

2 doc.Load(Server.MapPath("amcolumn_data.xml"));

3 XmlNodeList nodelist = doc.getElementsByTagName_r("value");//获取所有标签名为value的节点

4 nodelist.Item(4).InnerText = "4000"; //设置想要修改的节点的串联值

5 doc.Save(Server.MapPath("amcolumn_data.xml")); //保存到xml

好了，这样就大功告成了~

然后再说说我的另外一个flash的用法吧，这个就麻烦多了，中外的网站都给翻遍了(有点夸张,不过我确实是从晚上11点直到

早上5点半才把它给解决)，开始说了，这个flash只有一个xml

如果用前面的方法想要实现动态的话是不可能的，因为这个flash是从内部读取xml的，在外面怎么改都不能动态显示，我最先还想

通过禁用缓存的方法来解决，但也是不可能的，我甚至想了一个更绝的办法：直接拿修改后的xml去覆盖windows临时文件夹的xml

但还是行不通，最后实在不行了就只能把flash给反编译了，不过幸好flash的代码不那么麻烦，没找多久久找到了那个载入的函数

function load(url)

{

xml.load(url);

}

然后我直接在url后加上了随机变量

function load(url)

{

xml.load(url+“?"+Math.random());

}

这样就OK了

三 一个例子

AmCharts Flash 图形报表工具

发表于：2009年7月7日 |分类：Tech| 标签：
amcharts,
chart, flash |
views(10,853)
版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原文出处,即下面的声明.

原文出处：http://blog.chenlb.com/2009/07/amcharts-flash-report-tool.html

最近做一些服务器访问日志统计的工作，统计好数据后用什么工具输出，才会一目了然呢？恩，肯定是 chart。

Java 开源里有 JFreeChart，但要比较多的编程。很久以前用过 flex 的示例，印象中觉得用 flex 做chart 也比较好，但没有经验。同事建议用

googlechart api，但是要通过 url 传数据，可能它可以用 post 。前期的统计报表输出是用 google chart 与jquery 的插件完成了统计报表了。但是总是觉得不理想，可能是因为我看 google chart 的文档还没够（其实 google的文档好难懂），效果不是很好。

google chart: http://chart.apis.google.com/chart?cht=p3&chd=e:blog.chenlb.com&chs=250x100&chl=a|b|c|d|e|f|g




后来看了 spingside 的 wiki，知道了一直想要的什么，Flash Chart，spingside 作者推荐用amcharts。引用 spingside wiki 的一段话：

在画图工具中，在服务器端直接生成图片的又不美观又缺乏互动性，而在客户端用JavaScript生成的图片还是稍欠美感和互动性，所以最好看又最互动的报表方案应该是Flash报表方案了。

在FlashChart方案中，Amcharts，FusionChart与OFC三足而立，三者有不同的license策略，美观功能也略有不同，各凭喜好了。个人最喜欢Amcharts.

无论使用哪一种方案，形式上都差不多，静态的配置文件和flash文件+动态的数据文件(XML格式，JSON格式)。

先来看下效果吧：





pv/uv/ip of my site

amcharts 要一个“配置文件”（setting.xml），一个数据文件，一个 SWFObject.js，一个对应的 SWF就可以生成漂亮的统计报表了。例如上面示例的 amline_setting.xml

<?xml version="1.0" encoding="UTF-8"?>
<settings>
<labels>
<label lid="0">
<x></x>
<y>20</y>
<width>520</width>
<align>center</align>
<text>
<![CDATA[<b>PV/UV/IP Of My Site</b>]]>
</text>
</label>
</labels>

<graphs>
<graph gid="pv">
<title>PV</title>
<color>#FF0000</color>
</graph>
<graph gid="uv">
<title>UV</title>
<color>#00AA00</color>
</graph>
<graph gid="ip">
<title>IP</title>
<color>#0000FF</color>
</graph>
</graphs>
</settings>

数据文件
amline_data.xml

页面文件 amline.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Line & Area chart</title>
</head>
<body>
<!-- saved from url=(0013)about:internet -->
<!-- amline script-->
<script type="text/javascript" src="js/swfobject.js"></script>
<div id="flashcontent">
<strong>You need to upgrade your Flash Player</strong>
</div>

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("swf/amline.swf", "amline", "520", "400", "8", "#FFFFFF");
so.addVariable("path", "");
so.addVariable("settings_file", encodeURIComponent("amline_settings.xml")); // you can set two or more different settings files here (separated by commas)
so.addVariable("data_file", encodeURIComponent("amline_data.xml"));

so.write("flashcontent");
// ]]>
</script>
<!-- end of amline script -->
</body>
</html>

上面的示例可以在 http://demo.chenlb.com/amcharts/amline.html 看到。

其它图，如实际应用的一个饼图：



服务器的响应时间

好看吧。统计数据一目了然。amcharts除了基本的线图、饼图、条形图，还有股票图、地区图。基本能满足应用，赞一个。它可以免费使用，只不过在图的左上角有个官方的链接。

四 几个问题

1、避免浏览器缓存,以便实时刷新amCharts

在浏览器中（即session中）刷新页面，但是生成的数据却不能及时显示，但是，新开一个浏览器就可以。
如果你不是太在乎实时性，只是为了调试的方便，可以删除浏览器的临时文件即可。如果你需要的实时性比较强则可以让浏览器禁用缓存，在您的配置文件中作如下设置：<add_time_stamp>true</add_time_stamp>

这个设置将使浏览器自动在数据文件后面加个时间戳参数，以便每次重新获得你的数据来填充amCharts。也可以手动数据文件名后加个时间戳来，以PHP为例如下：

so.addVariable("settings_file", "settings.xml?<?phpecho mktime();?>");

也就是在settings.xml中加入<add_time_stamp>true</add_time_stamp>即可如下

<?xml version="1.0"encoding="utf-8"?>

<settings>

<add_time_stamp>true</add_time_stamp>

.................

..................

这里是其他设置项

<settings>

或：so.addVariable("settings_file",
"settings.xml?<?php echomktime();?>");

2、去掉左上角的链接网址

在.swf文件同目录下新建一个文件：amcharts_key.txt

写入一行内容：AMCHART-LNKS-1966-6679-1965-1082

3、中文显示



将数据文件amline_data.xml的编码方式改为UTF-8。即<?xmlversion="1.0" encoding="UTF-8"?>

http://hi.baidu.com/qingpengxiao/blog/item/fd77d655069f1a5d574e004f.html

4 在柱图柱子上加点击事件
有个这个事件： clickGraphItem="onAmSeriChartClick(event);"

private function onAmSeriChartClick(e:GraphEvent):void{

var gdi:GraphDataItem =e.item as GraphDataItem;

trace(gdi.category)

//根据这个名称去跳转就可以le

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航