最近需要学习 Amcharts ，他的图表功能确实很强大。但是网上搜索到的教程很少，开始学起的确有点不方便。于是我决定把我学习的觉得好的途径，放到博客上。
下面的代码可以直接复制，但是文件要从官网上下载下来。官网地址：www.amcharts.com
<html> <head> <title>My JSP 'index.jsp' starting page</title> <!-- 导入Amcharts js 库 --> <script src="amcharts/amcharts.js" type="text/javascript"></script> <script type="text/javascript"> var fun1 = function(){ 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}]; //AmSerialChart 类 var chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; //指定数据源 chart.categoryField = "country"; //数据的分类 //创建 var graph = new AmCharts.AmGraph(); graph.valueField = "visits"; //数值字段名称 graph.type = "column"; //列名称 chart.addGraph(graph); chart.write(document.getElementById("chartContainer")); //write 到 div 中 } </script> </head> <body onload="fun1()"> <div id="chartContainer" style=" 640px; height: 400px;"></div> </body> </html
上面代码执行后的效果图如下：
下面继续添加代码优化显示效果，注意下面的代码要放到
chart.write(document.getElementById("chartContainer")); 上面执行。
var categoryAxis = chart.categoryAxis; categoryAxis.autoGridCount = false;//设置为false，否则gridount属性会被忽略。 categoryAxis.gridCount = chartData.length; categoryAxis.gridPosition = "start"; categoryAxis.labelRotation = 90;//图形下面的文字旋转90度。
效果图：
下面填充3D：
graph.fillAlphas = 0.8;//填充柱形图的颜色 chart.angle = 30; chart.depth3D = 15;//控制列的深度和角度 graph.balloonText = "[[category]]: <b>[[value]]</b>";//在数值前面加上国家名
效果图：
制作面积图
graph.type = "line";
graph.fillAlphas = 0.5;
效果图：
带有项目符号的折线图
graph.fillAlphas = 0; // 或者删除这一行, 因为0是默认值 graph.bullet = "round"; graph.lineColor = "#8d1cc6";
效果图
