雖然我們認爲在開始學習amCharts或任何其他類似圖書館的最簡單的方法就是學習的例子（有很多人在樣本文件夾中），在本教程中，我們將通過建立你的第一個圖表從一開始的過程。別擔心，這不會需要很長時間。讓我們先通過一個簡單的柱形圖，並添加了一些不錯的功能吧。
設置
首先，你應該下載amCharts從下載頁面。解壓壓縮文件中的內容到你選擇的目錄。複製“amcharts”目錄從下載的zip文件到您的工作文件夾。然後創建一個使用您選擇的編輯一個簡單的HTML文件。我叫文件columnchart.html。
現在，讓我們打開文件並開始編碼。
添加一個容器
所需要的頁上的唯一的HTML元素是容器的圖表。讓我們添加一個DIV是這樣的：
<正文> <DIV ID =“chartdiv”的風格=“寬度：640px;高度：400像素;”> </ DIV> </ BODY>
這是JavaScript的圖表將作爲容器的抽吸面使用的對象。請注意，我們把它命名爲“chartdiv”。我們將在以後需要這個名字。
引用JavaScript庫
在我們的頁面的HEAD部分，我們將需要引用amCharts JavaScript庫。由於V3 amCharts庫分爲幾個文件，以節省一些千字節 - 你需要包括主amcharts.js文件和一個或多個表的文件，這取決於圖表需要。柱形圖是串行的圖表，所以我們有這兩個js文件：
<SCRIPT SRC =“amcharts / amcharts.js”類型=“文/ JavaScript的”> </ SCRIPT> <SCRIPT SRC =“amcharts / serial.js”類型=“文/ JavaScript的”> </ SCRIPT>
注 - 順序很重要 - amcharts.js要經常去的第一個。
我們需要一些示例數據的工作。因此，讓我們只需添加對象的簡單的JavaScript數組：
<腳本類型=“文/ JavaScript的”> 變種chartData = [{ “國”：“USA”， “參觀”：4252 }，{ “國”：“中國製造”， “參觀”：1882 }，{ “國”：“日本”， “參觀”：1809 }，{ “國”：“德國”， “參觀”：1322 }，{ “國”：“UK”， “參觀”：1122 }，{ “國”：“法國”， “參觀”：1114 }，{ “國”：“印度”， “參觀”：984 }，{ “國”：“西班牙”， “參觀”：711 }，{ “國”：“荷蘭”， “參觀”：665 }，{ “國”：“俄羅斯”， “參觀”：580 }，{ “國”：“韓國”， “參觀”：443 }，{ “國”：“加拿大” “參觀”：441 }，{ “國”：“巴西”， “參觀”：395 }，{ “國”：“意大利”， “參觀”：386 }，{ “國”：“澳大利亞”， “參觀”：384 }，{ “國”：“臺灣” “參觀”：338 }，{ “國”：“波蘭”， “參觀”：328 }]; </ SCRIPT>
如果您熟悉JSON，你可能會注意到，該數據是完全有效的JSON對象。
創建圖表
還有，你可以創建一個圖表amCharts兩種方式- 1）使用JavaScript API 2） 通過所有圖表配置爲JSON對象。在本教程中，我們將只包括1號的方法。這是一個更加靈活一些建議，如果你正在構建更復雜的，交互式的圖表。在你下載的軟件包的樣本文件夾，你可以找到很多這兩種方法的樣本。
我們可以使用在window.onload方法來開始建立的圖表，但因爲這不是一個很好的做法，amCharts有它自己的方法，這一點- AmCharts.ready。因此，所有的圖碼應該放在這種方法中：
AmCharts.ready（函數（）{ //圖碼會去這裏 }）;
首先，我們需要創建一個 AmCharts.AmSerialChart 我們的圖表對象，設置它的 dataProvider中 和categoryField 屬性。正如你可能已經從名字猜到， dataProvider中 用於指定數據源的圖表和 categoryField 表示舉辦值類別軸（通常爲X軸）的數據對象的字段。
VAR圖=新AmCharts.AmSerialChart（）; chart.dataProvider = chartData; chart.categoryField =“國家”;
下一步，我們將需要一個圖形添加到我們的圖表。圖表可以有多個圖形，但我們會解決一個在這部分。圖通過代表 AmCharts.AmGraph 類。我們將需要指定 valueField 並設置（數據提供者控股圖表項值的字段的名稱） 類型 字段“列” ，因爲我們正在創建一個柱形圖（默認爲“線”）。然後，我們只是圖添加到圖表。
VAR圖=新AmCharts.AmGraph（）; graph.valueField =“訪問”; graph.type =“列”; chart.addGraph（圖形）;
最後，我們要求我們的圖表本身呈現在我們chartdiv 通過調用它 的write（） 方法：
chart.write（'chartdiv'）;
下面是你應該看到，當你在瀏覽器中打開此頁面：
分類軸自定義
當我們在類別軸上一些連續的數據，我們不希望顯示的每一個在其上的數據點和過度擁擠了。然而，在這種特殊情況下，我們需要顯示標籤的所有類別軸點。
我們可以做到這一點通過調整 gridCount 物業 類別時 是這樣的：
VAR的CategoryAxis = chart.categoryAxis; categoryAxis.autoGridCount = FALSE; categoryAxis.gridCount = chartData.length; categoryAxis.gridPosition =“開始”;
我們還必須設置autoGridCount爲false，否則gridCount屬性被忽略。我們還設置gridPosition爲“啓動” ，使網格線不會跨列，但它們之間會去。所以，現在我們得到這樣的：
哎喲。不是很好。然而類別時有labelRotation財產。我們把它設置爲90（度）是這樣的：
categoryAxis.labelRotation = 90;
在這裏，我們去：
填寫＆3D
讓我們填補了我國柱的顏色，使它們3D。
首先，讓我們填充列。這是通過設置圖形的控制fillAlphas財產。
graph.fillAlphas = 0.8;
不透明度值範圍從0（透明）到1（完全不透明）。
讓我們也使圖表假3D。要做到這一點，我們設置圖表的depth3D控制列的深度（第三維度）和財產的角度 -控制3D方向發展。
chart.angle = 30; chart.depth3D = 15;
下面是我們已經有這麼遠：
氣球
目前，當用戶將鼠標懸停在列，他們可以看到底層數據點的值。
讓我們的香料它了一點，包括國家名稱（類別軸值）。這是通過設置圖形的做balloonText財產。你可以像使用預定義的標籤[類別]，[值]，等等。（所有可用標籤的列表，可以在發現AmGraph通過他們周圍的雙括號這樣的類參考）：
graph.balloonText =“[[類別]：<B> [值] </ B>”;
您還可以使用HTML和CSS標籤（自V3）。
現在，當我們在我們看到一個更好的，更翔實的氣球柱盤旋：
在這一部分，我們已經學會了如何實現一個網頁上的簡單互動的JavaScript柱形圖。這裏是的jsfiddle爲你玩它。
希望有一個面積圖呢？
比方說，你不想要列，但面積圖代替。所有你需要做的是設置：
graph.type =“行”;
並調整填充不透明度，如果你想：
graph.fillAlphas = 0.5;
這裏是結果：
線圖機智子彈？
要定期折線圖與一些不同的顏色和子彈？刪除3D屬性（角度 和depth3D），並設置：
graph.fillAlphas = 0; //或刪除這一行，因爲0是默認 graph.bullet =“圓”; graph.lineColor =“＃8d1cc6”;
幹得好：
正如你看到的，它真的很容易！開心圖表！
PS:本人英文不好純屬複製過來。就項目需要用到amcharts自己做的存案。找 分類軸自定義 這功能 找了一個下午。
看原文的朋友這裏 官網的教程 http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/