您的位置：首页 > 其它

使用amCharts绘制统计图表（柱状图、折线图、3D图）

2015-08-19 17:35 543 查看


amCharts是一款优秀的数据可视化js图形库，包括Javascript Charts, Javascript Stock Chart和Interactive Javascript Maps三类产品，本文简单介绍一下Javascript Charts的用法。

amCharts的安装：

从amCharts官方网站下载所需的图形组件，将压缩包解压至备选目录。把amcharts文件夹从下载到的zip文件中拷贝至工作目录下。然后使用你熟悉的编辑器创建一个简单的html文件，例如命名为columnchart.html。

接下来，我们打开文件开始编码。

添加容器：

页面所需的唯一HTML元素就是图表的容器。我们像这样来添加一个DIV：

<body>
<div id="chartdiv"></div>
</body>

JavaScript图表将使用这个对象作为绘图容器。请注意我们将其命名为"chartdiv"，这个名字后面会用到。

引用JavaScript库文件

在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件，为了节省几个kb空间—你需要添加amchart.js主文件，并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种，因此我们包含这两个js文件：

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

注意：添加顺序很重要，amcharts.js应该放在最前面。

我们需要一些示例数据来生成图表，在此我们添加一个简单的JavaScript数组对象：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
[/code]
如果你了解JSON，你应该会注意到这个数据就是一个标准的JSON对象。

创建图表

使用amCharts创建图表有2种方式： 1). 使用JavaScript API， 2).
将所有的图表配置以JSON对象的形式进行传递。在此我们以第一种方法为例。它更加灵活，是构建复杂的、交互式图表的推荐方法。在你下载的包文件的样例目录下，你可以找到许多关于这两种方法的例子。

我们可以使用window.onLoad方法开始构建图表，但这不是最佳实践，amCharts有它自己的方法：AmCharts.ready。因此所有的图表代码都应该放在这个方法里：

AmCharts.ready(function() {
// chart code will go here
});

首先我们需要为图表创建一个AmCharts.AmSerialChart对象，为其设置dataProvider和categoryField属性。你可能已经从名字猜到了属性的含义，dataProvider用来指定图表的数据源，categoryField指定数据对象中的横轴（X轴）。

var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
1
2
[/code]
接下来我们需要为chart添加一个graph。一个chart可以包含多个graph，在这个例子中我们只添加一个。graph通过AmCharts.AmGraph类来表示。我们需要指定valueField(纵轴)，将"type"字段设置为"column"，因为我们想要创建的是一个柱状图（默认值是"line"折线图）。然后我们将graph添加至chart中。

var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.type = "column";
chart.addGraph(graph);
1
2
3
[/code]
最后一步，通过调用write()方法将chart渲染至chartdiv容器中。

浏览器中的效果如下图所示：



自定义横轴

当我们有一些序列化数据需要展示时，可能不希望将所有的数据在横轴上显示出来，以免过于拥挤。然而在这个特定的例子中，我们需要显示所有的类别轴上的标签。

我们可以通过像这样调整categoryAxis上的gridCount属性来达到此目的：

var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount  = false;
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";
1
2
3
[/code]
我们也需要将autoGriddCount设为false，否则gridCount属性会被忽略。我们也需要将gridPosition设为"start"以便网格线不会与列相交，效果如下：



很难看，不过不要紧，caegoryAxis有一个labelRotation属性，我们像这样将它设为90度：

categoryAxis.labelRotation = 90;

这样就好多了：



填充和3D

接下来我们再把柱形图填充上颜色，然后再3D化

首先我们填充列。者通过graph的fillAlphas属性控制。

graph.fillAlphas = 0.8;

透明度属性区间为0（透明）到1（不透明）。

我们也可以使图表伪3D化。实现此功能我们需要设置图表的depth3D属性，该属性控制着列的深度（第三维）和角度—控制着3D方向。

chart.angle = 30;
chart.depth3D = 15;

目前为止效果如下所示：



气球

现在，当用户鼠标在列上悬停时，可以看到数据点的值。



我们稍微做一些改进，给气球添加上国家名（横轴的值），这通过设置graph的ballonText属性即可实现。你可以使用预定义的标签，比如[[category]]，[[value]]等。（所有可用的标签可以在AmGraph的类引用中找到），使用时加上双中括号：

graph.balloonText = "[[category]]: <b>[[value]]</b>";

你也可以使用HTML和CSS标签（从V3开始）。

现在当我们将鼠标悬停在列上时可以看到一个美观的包含更多信息的气球：



在这个部分，我们已经学习了如何在Web页面上实现一个简单的交互式JavaScript柱状图。这里是jsFiddle在线实例

面积图

面积图的设置需要更改graph的type和fillAlphas属性：

raph.type = "line";

graph.fillAlphas = 0.5;

结果如下：



带有项目符号的折线图

要构建一个带有不同颜色和项目符号的折线图？移除3D属性（angle和depth3D）

graph.fillAlphas = 0; // 或者删除这一行, 因为0是默认值
graph.bullet = "round";
graph.lineColor = "#8d1cc6";
1
2
[/code]
效果如下：

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