最近需要学习 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. QHash和QMultiHash使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QHash和QMultiHash使用     本文地址:http://techieliang. ...

  2. xpath的学习

    xpath的作用就是两个字“定位”,运用各种方法进行快速准确的定位,推荐两个非常有用的的firefox工具:firebug和xpath checker   定位 1.依靠自己属性,文本定位 //td[ ...

  3. Android自动化 -- sendevent/getevent 用法

    getevent&sendevent 是android系统下的一个工具,可以 模拟 多种按键和触屏操作,产生的是raw event,raw event经过event hub处理产生最终的ges ...

  4. 【笔记】sublime 一些常用功能和快捷键

    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...

  5. ZOJ2725_Digital Deletions

    题意是这样的,一开始给你一串数字,两个人轮流操作,操作可以分为两种. 1.每次修改一个数字,使其变为一个小于当前的非负数. 2.移除中间的某一个0以及0右边的所有数字. 使得所有数字消失的游戏者获胜. ...

  6. BZOJ 1237 配对(DP)

    给出两个长度为n的序列.这两个序列的数字可以连边当且仅当它们不同,权值为它们的绝对值,求出这个二分图的最小权值完全匹配.没有输出-1. n<=1e5.用KM会TLE+MLE. 如果连边没有限制的 ...

  7. python 锁 信号量 事件 队列

    什么是python 进程锁? #同步效率低,但是保证了数据安全  重点 很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱 这个时候,我们可以使用multiprocess ...

  8. 【JavaScript】JAVA-input如何占满整个td

    如果使用下面这种方式,不会出现占满效果 <tr> <td colspan="2"> <input width="90%" alig ...

  9. （转）Linux GCC常用命令

    1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...

  10. 【Cogs2187】帕秋莉的超级多项式（多项式运算）

    [Cogs2187]帕秋莉的超级多项式(多项式运算) 题面 Cogs 题解 多项式运算模板题 只提供代码了.. #include<iostream> #include<cstdio& ...