你的第一个图表amCharts

虽然我们认为在开始学习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/