amCharts在網頁上繪製各種圖形[轉]

一 amCharts柱狀圖實例教程

本實例講的是JavaScript版的，flash版的有空再弄上來

一、下載並配置

去官網下載http://www.amcharts.com/

下載後解壓，把解壓後的文件夾中的amcharts文件夾內的內容全部複製到你的網站腳本目錄中（本例以js文件夾爲例）

二、創建一個用於顯示圖表的div

三、引用amCharts的js函數庫

四、定義一個json數組變量用於存放我們的數據

五、接下來我們需要創建一個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>
<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>
</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
       }

amCharts在網頁上繪製各種圖形[轉]

AmCharts Flash 圖形報表工具

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

VB中，連接ACCESS數據庫

amchart使用總結

oracle 多個字段去重複

java web監聽器詳解

amCharts在網頁上繪製各種圖形[轉]

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結