Amcharts的特点包括:
*动画或静态
*价值轴能够扭转
*线性或对数轴的价值尺度
*预定义或定制的子弹
*定制描述任何数据点
*点击栏目/酒吧（可用于钻孔下来图表）
*梯度弥漫
*价值指标插入式
*轴价值观内样区
*平台无关
*可以输出作为一项形象
*可控制在途经的JavaScript
*设置和数据可以通过直接从一个HTML文件
*度身定做的形象或Flash （动画）背景
*无限标签
*旋转标签及轴价值观
*数据可自动重装上阵与预设频率
*任何格式文本气球
ColumnChart
Axes
Balloons
Column //柱状图的柱子的设置
Context Menu
Error messages
Externals
Grid
Guides
Image export
Legend
Line
Margins
Plot area
Strings
DataSourceID
Angle
BackColor 控件背景色
Labels
效果图片：
实现代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = [ {
"country" : "USA",
"visits" : 4025
}, {
"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
} ];
AmCharts.ready(function() {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";
//动画特效 延迟时间 秒
chart.startDuration = 0.3;
//3D
chart.angle = 30;
chart.depth3D = 15;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
//图形样式
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
chart.write("chartdiv");
});
function reloadData(url) {
var dynamicData = loadStringData(url);
chart.dataProvider = eval('(' + dynamicData + ')');
chart.validateNow();
chart.validateData();
}
//
function loadStringData(link) {
//return chartData2;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', link, false);
request.send();
return request.responseText;
}
//可以获得 URL 的主机部分
var hostName = window.location.host;
window.setInterval("reloadData('http://" + hostName
+ "/amcharts/charts/test')", 1000);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
</body>
</html>
原文地址：http://blog.csdn.net/ljfwl/article/details/28859625
