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

amCharts

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

如果你了解JSON,你应该会注意到这个数据就是一个标准的JSON对象。

创建图表

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

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

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

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

var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";

   
   
  • 1
  • 2

接下来我们需要为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

最后一步,通过调用write()方法将chart渲染至chartdiv容器中。

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

自定义横轴

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

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

var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount  = false;
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";
   
   
  • 1
  • 2
  • 3

我们也需要将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

效果如下:

xml <!-- [xml] (xml / csv) 数据类型xml/csv--> ; <!-- 如果使用csv作为数据的话,需要使用这个属性;表示文件数据分隔符,(平常以";"和","为主) [;] (string) csv file data separator (you need it only if you are using csv file for your data) --> 1 <!-- 如果使用的是csv数据,可以设置跳过几行再显示数据,默认为0表示csv中的数据全部显示,大于n(n>0);表示前面n行都不显示[0] (Number) if you are using csv data type, you can set the number of rows which should be skipped here --> <!-- 设置系统中的字体[Arial] (font name) use device fonts, such as Arial, Times New Roman, Tahoma, Verdana... --> <!-- 设置所有文本的大小,默认为11,具体的文本的字体大小也可以在下面的设置中设置[11] (Number) text size of all texts. Every text size can be set individually in the settings below --> <!-- 同上[#000000] (hex color code) main text color. Every text color can be set individually in the settings below--> . <!-- 小数分隔符,默认为[,]注:该属性只是用来显示,而在csv数据文件中,必须使用[.] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot --> <!-- 千位分隔符,默认为空[ ] (string) thousand separator. use "none" if you don't want to separate --> 3 <!-- 如果百分数格式的数字,后面的小数位小于该属性的值,则在小数后面加0补充。如54.2%,该属性设置为3,那么显示的效果为54.200%。[] (Number) if your value has less digits after decimal then is set here, zeroes will be added --> <!--设置科学记数法的最小值 [0.000001] If absolute value of your number is equal or less then scientific_min, this number will be form
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值