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