最近需要学习 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="width: 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";

效果图

Amcharts 柱状图和线形图的更多相关文章

  1. ***百度统计图表Echarts的php实现类，支持柱形图、线形图、饼形图

    /** * 百度数据统计图表echart的PHP实现类 * * 原作者: * @author: chenliujin <liujin.chen@qq.com> * @since 2013- ...

  2. JFreeChart 图表生成实例(饼图、柱状图、折线图、时序图)

    import java.awt.BasicStroke; import java.awt.Color; import java.io.FileOutputStream; import java.io. ...

  3. 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)

    第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...

  4. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  5. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  6. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  7. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  8. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  9. Android图表库MPAndroidChart(二)——线形图的方方面面，看完你会回来感谢我的

    Android图表库MPAndroidChart(二)--线形图的方方面面,看完你会回来感谢我的 在学习本课程之前我建议先把我之前的博客看完,这样对整体的流程有一个大致的了解 Android图表库MP ...

随机推荐

  1. 将 Spring 和 Hibernate 与 WebSphere Application Server 一起使用

    本文摘要 如果您考虑将 Spring 或 Hibernate 与 IBM® WebSphere® Application Server 一起使用,则本文向您阐述了如何配置这些框架,以适用于 WebSp ...

  2. jQuery之offset,position

    获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...

  3. 复利计算C语言转java的相关代码

    static void principal()// 计算本金 { int N, m; double i, F, P; System.out.printf("复利终值:"); F = ...

  4. 软工网络15团队作业4——Alpha阶段敏捷冲刺-6

    一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 完成对账单的编辑,删除等操作,以及开始服务器的编写工作 明天计划完成的工作: 记账功能基本完成,进一步优化功能与完善服务器 工作中遇到的困难 ...

  5. Excel poi API基础教程！

    原文转子: http://blog.csdn.net/yellowd1/article/details/44628701 登录|注册     yellowd1的专栏       目录视图 摘要视图 订 ...

  6. LR之Java Vuser II

    最近项目待压测的服务端协议使用的是java的Netty框架开发,而传输的业务数据使用了google protobuf进行序列化,然后通过tcp数据流与客户端通讯.这一次的压测脚本决定使用LR的java ...

  7. Halcon 笔记1

    Halcon Example位置: C:\Users\Public\Documents\MVTec\HALCON-13.0\examples 安装位置:C:\Program Files\MVTec\H ...

  8. Java容器深入浅出之List、ListIterator和ArrayList

    List是Collection接口的子接口,表示的是一种有序的.可重复元素的集合. List接口的主要实现类ArrayList和Vector,底层都是维护了一套动态的,可扩展长度的Object[]数组 ...

  9. [洛谷P5190][COCI 2010] PROGRAM

    题目大意:给你$k(k\leqslant10^6)$个数,$f(x)$表示$x$的约数在$k$个数中出现的次数,在这任何数都是$0$的约数.$m(m\leqslant10^6)$次询问,每次给出$l, ...

  10. 洛谷 P3802 小魔女帕琪 解题报告

    P3802 小魔女帕琪 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组合,从 ...